前端axios中interceptors拦截器请求头失效的问题

1.第一次请求interceptors中请求头能看到token/authorization

2.但是第二次请求就失效了,请求头看不到token/authorization

解决:

 axios.interceptors.request.use(config => {
                    config.headers = {
                        authorization: token,
                        ...config.headers
                    }
                    return config;
                }
                )
                const data = await axios.get(`${getTagsByTheme}?themeId=${themeId}`, {
                    headers: {
                        authorization: token
                    }
                });

再axios.get中加入headers: {

        authorization:token

}

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
新版本的Vue已经不再内置axios,而是推荐使用vue-axios插件,它是axios的Vue插件形式。所以,如果你使用的是新版本的Vue,你需要手动安装vue-axios并在项目使用它才能拦截请求。 首先,你需要安装vue-axios插件。你可以在终端运行以下命令来安装它: ``` npm install vue-axios ``` 安装完成后,你需要在你的主文件(通常是main.js)导入vue-axios并将它作为Vue的插件使用,以便在整个应用程序使用它。代码如下: ```javascript import Vue from 'vue' import axios from 'axios' import VueAxios from 'vue-axios' Vue.use(VueAxios, axios) ``` 接下来,你可以在你的组件使用vue-axios来发起请求并添加拦截器。你可以这样做: ```javascript import axios from 'axios' axios.interceptors.request.use( function(config) { // 在请求发送之前做一些处理 return config }, function(error) { // 请求错误时做一些处理 return Promise.reject(error) } ) axios.interceptors.response.use( function(response) { // 对响应数据做一些处理 return response }, function(error) { // 对错误响应做一些处理 return Promise.reject(error) } ) ``` 请注意,你在这个例子使用的是全局的axios实例,它不再是Vue的插件。所以你需要手动导入axios并使用它。 使用这种方式,你的新版本Vueaxios拦截器就可以正常使用了。拦截器将在请求发送之前和响应返回之后进行处理,让你可以对请求和响应进行自定义操作。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值