Axios发送POST请求出现Access-Control-Allow-Origin CORS错误如何解决？

你对CORS的配置逻辑存在根本性错误：Access-Control-Allow-Origin是服务端响应头，而非客户端请求头，前端主动往请求头里添加该字段完全不会生效，甚至额外添加的自定义请求头还会触发非简单请求的预检逻辑，反而更容易出现CORS错误。

浏览器的CORS校验逻辑是：发送跨域请求后，会先检查服务端返回的响应头中是否配置了允许当前页面源访问的CORS规则，如果没有匹配到规则，浏览器会直接拦截响应并抛出CORS错误，整个过程前端无法通过修改请求头绕过。

• 本地开发阶段最快捷的方案是配置开发代理：
  如果你使用Vue/React等官方脚手架，可直接配置devServer代理，将接口请求路径代理到后端服务地址，规避跨域问题。以Vue-cli为例，vue.config.js配置参考如下：

  module.exports = {
    devServer: {
      proxy: {
        '/api': {
          target: 'http://localhost:8084',
          changeOrigin: true,
          pathRewrite: { '^/api': '' }
        }
      }
    }
  }
  

  配置完成后将axios实例的baseURL修改为/api即可。
• 最终上线的通用解决方案是修改服务端配置：
  让后端开发人员在服务端响应头中添加CORS相关规则，开发阶段可直接配置Access-Control-Allow-Origin: *临时放开跨域限制，生产环境按实际允许的站点域名配置即可。不同后端框架都有成熟的CORS配置方案：比如Node.js的Express框架可直接引入cors中间件一键配置，Java SpringBoot项目可通过@CrossOrigin注解或者全局CORS配置实现。
• 线上部署也可通过Nginx反向代理解决：
  配置Nginx将前端静态资源和后端接口使用同一域名的不同路径分发，从根源上规避跨域问题。

注意：请先删除你之前在axios请求头中添加的Access-Control-Allow-Origin相关配置，该配置无效且可能引发额外的请求异常。

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