axios request拦截中添加了Access-Control会报name.toUpperCase是什么原因？

Question

问题描述

后台已经添加了Access-Control-Allow-Origin跨域请求，我在axios request拦截中添加了Access-Control-Allow-Origin，但是浏览器报错name.toUpperCase is not a function不知道是什么原因导致的。

问题出现的环境背景及自己尝试过哪些方法

谷歌了一上午也没找到解决问题方法

相关代码

// 请把代码文本粘贴到下方（请勿用图片代替代码）
没加Access-Control-Allow-Origin之前浏览器报错是这样的

于是我添加了如下代码

之后浏览器报错就变成了这样

你期待的结果是什么？实际看到的错误信息又是什么？

这是vue项目，希望在请求拦截时添加跨域，能够正常访问接口。

初次使用vue，不知提出问题是否明确，还请大家多多帮助。

Answer 1

这个问题本身就有问题。

首先，Access-Control-Allow-Origin 是要后端服务添加到 response 的 header 中的，而不是像你问题中这样添加到请求的 header 中的，你检查一下接口的 response header 中有没有 Access-Control-Allow-Origin 这个字段，如果有的话看看值是什么。

其次，你添加 header 的方式也不对，config.headers 是一个对象，如果要添加的话也是要通过 config.headers = {} 的方式添加，而你的添加方式是把 headers 设置成了一个字符串（看看文档，好好理解下）。

你说你 Google 了一个上午，估计是方向不对，你可以借这个机会你可以 Google 一下数据接口前端跨域的解决方案，理解一下。

Answer 2

vue前端要解决跨域 本地开发 就配代理 其他环境无能为力
疑问是:你加请求响应头?
按你描述的后台配置了Access-Control-Allow-Origin 为*
那你直接请求啊

Answer 3

Access-Control-Allow-Origin 应该加到response。 所以不明白你在做啥