React中用axios.get调用需token的API开CORS插件仍报401和CORS错误如何解决

问题根因 #

你遇到的是预检请求跨域和接口鉴权两个独立问题，不存在互斥关系：

• 不带token时报401是正常逻辑：接口本身要求携带Authorization头鉴权，无有效token返回401 Unauthorized完全符合设计，和CORS无关。
• 带有效token时报CORS错误的原因：当你在请求头中加入Authorization字段后，原有的简单GET请求会变为非简单请求，浏览器会自动先发送OPTIONS类型的预检请求，确认后端允许跨域携带自定义头。你用的Moesif CORS扩展默认只处理简单请求的跨域头，没有适配OPTIONS预检请求的返回规则，也没有允许Authorization头跨域，因此触发CORS报错。你调用其他无token的接口正常，就是因为那些请求属于不需要预检的简单请求，CORS扩展的基础配置就能覆盖。

解决方案 #

方案1：使用本地开发代理（最稳定，推荐开发阶段用） #

本地开发脚手架（Vue CLI、Create React App、Vite等）都自带代理转发功能，代理会在本地服务端把请求转发到目标接口，完全绕过浏览器跨域限制，不需要任何CORS扩展。
以Vite为例，在vite.config.js中添加如下配置：

export default defineConfig({
  server: {
    proxy: {
      '/v3': {
        target: 'http://quote.dellsvc',
        changeOrigin: true
      }
    }
  }
})

之后请求地址改为/v3/quotes?number=${Quote}&version=${Version}即可。

方案2：调整Moesif CORS扩展配置 #

打开扩展的设置页面，做两处修改：

• 允许的请求头添加Authorization，或直接设置Access-Control-Allow-Headers为*
• 开启OPTIONS请求拦截，直接返回200状态码，同时添加对应的跨域响应头

方案3：后端调整CORS规则（生产环境唯一适用方案） #

让后端接口服务添加CORS配置：

1. 允许OPTIONS方法的访问
2. 响应头添加Access-Control-Allow-Headers: Authorization
3. 配置对应的允许跨域域名（生产环境不建议用*）

验证方法 #

可以先用Postman发送OPTIONS请求到目标接口，请求头携带：

• Access-Control-Request-Method: GET
• Access-Control-Request-Headers: Authorization
  如果返回的响应头没有对应的跨域允许规则，就可以确认是后端预检请求处理缺失导致的CORS报错。

内容的提问来源于stack exchange，提问作者Raiden Choong