配置axios拦截器一些坑(一）

只吃一口e

于 2021-09-08 00:33:44 发布

阅读量587

点赞数

文章标签： vue.js html javascript

本文链接：https://blog.youkuaiyun.com/qq_43628847/article/details/120170274

版权

博客介绍了在Vue项目中遇到Vue路由守卫和Axios请求拦截器使用时出现的错误，特别是设置请求头时的报错。通过创建对象副本来修改请求头，成功解决了问题。文章详细记录了解决过程，对于遇到类似问题的开发者具有参考价值。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

之前写过一个vue的路由守卫和axios的拦截器，但是会有一些报错，一直没解决，今天解决了，记录一下

报错版本
请添加图片描述
报错信息

配置请求拦截器的时候，添加请求头时，不能直接进行修改，不然就会修改不成功，而且一直报错，所以复制一个对象，通过复制的对象进行修改。

请添加图片描述

import axios from 'axios';

Vue.prototype.$axios = axios;
Vue.config.productionTip = false;

axios.defaults.baseURL = '';
// 添加请求拦截器
axios.interceptors.request.use((config) => {
  // 请求之前看看有没有token。如果有，则以请求头的方式进行穿的
  const token = window.sessionStorage.getItem('token');
  if (token) {
    // 设置请求头，将token携带
    const obj = config;
    obj.headers['x-client-token'] = token;
  }
  return config;
}, error => (
  // 请求错误
  Promise.reject(error)
));

// 响应拦截器
axios.interceptors.response.use((response) => {
  window.console.log(response);
  return response;
}, error => (
  Promise.reject(error)
));