vue axios 跨域请求在ie浏览器 报错 Access-Control-Allow-Headers 列表中不存在请求标头 authorization.

问题原因

标准的head，认证名字叫做Authorization，A要大写，但是在vue用axios跨域请求时，传的head名称为authorization，是小写，所以即使是设置Access-Control-Allow-Headers为，也无法识别。

解决办法

后台服务器设置Access-Control-Allow-Headers为'authorization,Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type'，强制包含一个authorization头即可。

当前存在以vue26 开发的单例应用, 我们希望使用 qiankun ，将该应用转微应用结构。

在保证原功能可用的情况下，使用vue30重构部分功能。

这里记录使用vue做微应用开发时，各个应用数据请求代理的配置方式

我们知道一般，独立使用vue开发单例应用，可以通过配置 vueconfigjs 的 { devServer: proxy } 实现接口请求代理

而在微应用开发中，情况稍有不同。 具体的可以分为以下几种情况:

现在的问题是，当基座和子应用各自独立配置代理服务时，各自独立开发请求数据是正常的。

而子应用加载到基座后，子应用的数据请求将为 404 。

基座版本 vue2612 ,

初看这里微应用中的代理配置和单例配置没有任何区别其实代理的配置基础都是基于vueconfigjs配置或者说是 webpack代理配置, 之所以 这里子应用无论独立开发或加载到基座联调，都能正常请求到数据，是因为基座和子应用都配置了相同的代理头 /proxyApi 并且请求的服务地址一致

这里回到问题， 如果基座和子应用独立配置, 例如:

子应用独立开发时的请求地址: /user

当子应用嵌套在基座内时，地址将变为: localhost: 9000/user

可以看到请求地址发生了变换，原 /user 地址在独立开发时是能通过webpack server 做正常代理的

而在微服务中， /user 地址转向了基座的本地开发服务 localhost:9000/user 而开发服务是无法识别这个请求地址的，自然返回 404

所以我们将子应用的代理头与基座同步, 这样子应用的请求将通过基座的开发服务做代理转发, 之所以设置相同的代理头而不是在基座再配置一遍子应该代理，也是为了方便设置，遵循 约定大于配置 原则。

之前的方法请求的baseurl 都为先对请求地址, 其实我们也可以直接设置完整的请求地址。

例如：axioscreate({ baseURL: ' >

这个问题和vue无关。

跨域请求就会出现这样的问题。

由于CORS（cross origin resource share）规范的存在，浏览器会首先发送一次options嗅探，同时header带上origin，判断是否有跨域请求权限，服务器响应access control allow origin的值，供浏览器与origin匹配，如果匹配则正式发送post请求。

在vue-cli脚手架项目中，我们通常遇过发送axios请求，后台接受不到数据，试了下ajax请求，后台便可以接收到数据，对比两者的请求，发送有一点区别，就是请求参数的区别

//利用axios拦截器来进行转换，只需要转换一次

axiosinterceptorsrequestuse(function (config) {

//请求头转换为表单形式

  configheaders['Content-Type'] = 'application/x->

以上就是关于vue axios 跨域请求在ie浏览器 报错 Access-Control-Allow-Headers 列表中不存在请求标头 authorization.全部的内容，包括:vue axios 跨域请求在ie浏览器 报错 Access-Control-Allow-Headers 列表中不存在请求标头 authorization.、vue3.0 微应用数据请求跨域配置、vue axios发送post请求，怎么设置请求头解决跨域等相关内容解答，如果想了解更多相关内容，可以关注我们，你们的支持是我们更新的动力！