vue3/ts/axios config.headers 不存在属性“Authorization” 类型“AxiosHeaders”上不存在属性“Authorization”。ts(2339)

最新推荐文章于 2023-07-28 13:13:20 发布
最新推荐文章于 2023-07-28 13:13:20 发布
阅读量2.1k 收藏 4
点赞数 2
分类专栏： vue3/ts 文章标签： javascript 前端 typescript ajax vue.js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43845028/article/details/128569891
版权

在Vue3 + TypeScript 中，用typescript封装axios时，出现了以下问题(在axios最新版本下 1.2.2)

在config.headers中没有属性“Authorization”
vue3 + ts axios版本1.2.2
在这里插入图片描述

类型“AxiosHeaders | Partial<RawAxiosHeaders & MethodsHeaders & CommonHeaders>”上不存在属性“Authorization”。

解决办法一：
将axios版本降级，降到1.1.3。关闭该文件，再打开文件错误消失

  yarn remove axios
  yarn add axios@1.1.3

方法二：
调用config.headers的set方法新增Authorization属性 （ axios版本：axios1.2.2）
输入以下代码，解决

typeof config.headers.set === 'function'  && config.headers.set('Authorization', `Bearer ${token}`)
明月袭行
关注
  • 2
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 5
    评论
专栏目录
aixos版本1.2.2里面如果强行在请求拦截器中设置Authorization 会报错 config.headers.Authorization = `Bearer ${token}`
m0_72976487的博客
01-05 1193
1.将 axios 的版本降级到 1.1.3。2.调用 set 方法。
vue-基于Vue+axios前端实现登录登出拦截功能.zip
最新发布
05-04
config.headers.Authorization = `Bearer ${store.state.auth.token}`; } else { // 未登录，跳转到登录页 router.push('/login'); return Promise.reject(new Error('需要登录')); } return config; }, ...
类型“AxiosHeaders | Partial＜RawAxiosHeaders & MethodsHeaders & CommonHeaders＞”上不存在属性“Authorization”。
森姐姐的博客
02-20 319
在请求拦截器里添加Authorization携带Token报错
axios请求在ie浏览器报错 Access-Control-Allow-Headers 列表中不存在请求标头 authorization
dujyong的博客
04-22 5631
ie浏览器报错,其他浏览器正常,上图: 原因: vue axios 跨域请求，请求头不传token时，所有浏览器都能成功，在请求头中传token，在谷歌浏览器和火狐正常，在ie浏览器报错,因此可以得出是请求头token的问题, 解决: 标准的head，认证名字叫做Authorization，A要大写，但是在vue用axios跨域请求时，传的head名称为authorization，是小写，所以即...
设置请求头里添加Authorization时出现 类型“AxiosHeaders | Partial“上不存在属性“Authorization“ 的错误提示解决办法
weixin_69810757的博客
01-06 1900
使用axios发送网络请求时在请求拦截器中设置请求头里添加Authorization携带token , 出现了 类型"AxiosHeaders | Partial"上不存在属性"Authorization" 的错误提示解决方法
vue利用request拦截器发送JWT校验.后台无法获取到Authorization信息怎么办？
计算机毕业论文源码，学生个人网页制作html源码。贴近用户做网络推广和互联网优化。
08-11 984
　　我来详细描述一下问题： 　　最近在自学用vue-element-admin和.net core写一个前后端分离的程序。目前的问题出在：登录成功后，后台会返回一个Token给前端，前端在登录后需要利用Token再次请求后端获取用户信息。问题就出在这里：我虽然在request拦截器中加入了Token,但是后台无法获取...
vue-axios.zip
08-30
import VueAxios from 'vue-axios' import Axios from 'axios' Vue.use(VueAxios, Axios) ``` 这样，axios就被注入到了Vue原型链中，可以直接在Vue组件内使用`this.$axios`发起请求。 3. **请求封装** 使用...
vue+axios全局添加请求头和参数操作
10-15
config.headers.Authorization = VueCookie.get('token'); } else { router.push('/login'); } return config; }, error => { return Promise.reject(error); } ); ``` 注意，为了让axios能够携带...
vue3+wangEditor5自定义上传音频+视频
07-05
在本文中，我们将深入探讨如何在Vue3项目中结合wangEditor5实现自定义上传音频和视频功能。wangEditor5是一款轻量级且功能强大的富文本编辑器，它提供了丰富的API和自定义选项，使得在Vue3这样的现代前端框架中集成...
详解vue中axios请求的封装
10-17
config.headers.Authorization = `Bearer ${token}`; } return config; }, error => Promise.reject(error) ); // 响应拦截器 axios.interceptors.response.use( response => { if (response.status === 200...
Vue post请求在header中携带authorization body
weixin_60700622的博客
11-27 1751
因为 axios设置头部信息 需要在第三个参数里 所以如果不携带body 第二个参数需要用空对象{} 占位 如果 头部中携带的是body 可以写在第二个参数中
Day 120/200 Axios获取不到headers中的Authorization属性怎么办？
xinghuowuzhao的博客
05-19 931
写在前面的话 本地开发可以获取到服务端headers返回的Authorization，但线上环境获取不到headers中的Authorization 很崩溃... 试了很多方法都不好使, 最后是后端同学改了NGINX配置好的 解决方案是在NGINX中添加配置： Access-Control-Expose-Headers:Authorization 参考链接： https://stackoverflow.com/questions/37897523/axios-get-ac...
vue设置Authorization 后端无论如何都取值取不到
m0_52946104的博客
04-19 1074
如果配置了代理类那么就不能在axios中配置baseurl了。综上所述可能时配置代理时候出问题了。自己封装的axios类。看请求发现发送了两次。
请求头中的Authorization
热门推荐
m0_61672533的博客
11-10 1万+
对Authorization的理解
axios跨域请求相应的header中没有Authorization问题的解决
weixin_52191917的博客
02-04 2831
axios跨域请求相应的header中没有Authorization问题的解决
万恶的Authorization问题；apache+小皮+tp6+vue3项目
weixin_45316408的博客
07-28 573
win+小皮+apache 的环境下，前端发送了Authorization但是php接收不到。
关于前后端交互的一些基础知识点
weixin_45766034的博客
10-13 397
1.如何中断ajax请求？ 设置超时时间让ajax自动断开 手动停止ajax请求，其核心是调用XML对象的abort方法，ajax.abort() 2、axios的特点有哪些？ 一、Axios 是一个基于 promise 的 HTTP 库，支持promise所有的API 二、它可以拦截请求和响应 三、它可以转换请求数据和响应数据，并对响应回来的内容自动转换成 JSON类型的数据 四、安全性更高，客户端支持防御 XSRF 3、axios相关配置属性？ url是用于请求的服务器URL method是创建请
理解并使用ASP.NET的高级配置
weixin_30558305的博客
06-13 154
理解并使用ASP.NET的高级配置 (转自http://piccolo.cnblogs.com/articles/123876.html) 引言： 本文将讨论ASP.NET应用的高级配置方法，在文中将讨论的一些配置如下：为ASP.NET进程设置独立的ID标记；配置ASP.NET网站或者网 站目录的访问权限；处理自定义配置事件等。除了以上提到的问题，本文还将讨论...
转载三篇关于 Web.config 的 Authorization 节点配置的文章
jzt_designer的专栏
09-20 877
文章一、WebConfig Authorization 节点 授权的目的是确定是否应该授予某个标识对给定资源请求的访问权限类型。有两种基本方式来授予对给定资源的访问权限： 文件授权 文件授权由 FileAuthorizationModule 执行，它在使用 Windows 身份验证时处于活动状态。它执行 .aspx 或 .asmx 处理程序文件的访问控制列表 (ACL) 检查
vue使用config.js配置全局axios路由
05-20
要在Vue项目中全局配置axios和路由，可以按照以下步骤进行： 1. 安装axios和vue-router ``` npm install axios vue-router --save ``` 2. 在src目录下创建一个config.js文件，用于存放全局配置 ```javascript import axios from 'axios' import router from '../router' // axios配置 axios.defaults.baseURL = 'http://localhost:3000' axios.defaults.timeout = 5000 // 请求拦截器 axios.interceptors.request.use( config => { // 如果有token则添加到请求头中 if (localStorage.token) { config.headers.Authorization = localStorage.token } return config }, error => { return Promise.reject(error) } ) // 响应拦截器 axios.interceptors.response.use( response => { // 如果返回的状态码为200，说明接口请求成功，可以正常拿到数据 // 否则的话抛出错误 if (response.status === 200) { return Promise.resolve(response) } else { return Promise.reject(response) } }, error => { if (error.response.status) { switch (error.response.status) { // 401: 未登录 // 未登录则跳转登录页面，并携带当前页面的路径 // 在登录成功后返回当前页面，这一步需要在登录页操作。 case 401: router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) break // 403 token过期 // 登录过期对用户进行提示 // 清除本地token和清空vuex中token对象 // 跳转登录页面 case 403: alert('登录过期，请重新登录') // 清除token localStorage.removeItem('token') // store.commit('loginSuccess', null) setTimeout(() => { router.replace({ path: '/login', query: { redirect: router.currentRoute.fullPath } }) }, 1000) break // 404请求不存在 case 404: alert('网络请求不存在') break // 其他错误，直接抛出错误提示 default: alert(error.response.data.message) } return Promise.reject(error.response) } } ) export default axios ``` 3. 在main.js中引入config.js文件，并将axios和router挂载到Vue.prototype上 ```javascript import Vue from 'vue' import App from './App.vue' import router from './router' import axios from './config' Vue.config.productionTip = false Vue.prototype.$axios = axios Vue.prototype.$router = router new Vue({ router, render: h => h(App), }).$mount('#app') ``` 现在可以在Vue项目的任何地方使用axios和router了。

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值