使用ReactJs和Axios发送JSON API请求时遭遇CORS错误的求助

嘿，我之前也踩过一模一样的坑——Chrome的CORS插件搞定了GET请求，可POST还是报跨域错，太闹心了！给你几个实际可行的解决思路：

• 根本方案：后端配置CORS（推荐）
  插件只是临时的开发 workaround，真正要根治得让后端配合设置CORS头。比如后端是Node.js+Express的话：

  1. 先安装cors中间件：npm install cors
  2. 在服务器代码里配置允许跨域的规则：

     const cors = require('cors');
     const express = require('express');
     const app = express();
     
     // 允许localhost:3000的跨域请求，支持POST、OPTIONS等方法
     app.use(cors({
       origin: 'http://localhost:3000',
       methods: ['GET', 'POST', 'OPTIONS'],
       allowedHeaders: ['Content-Type'] // 如果你的请求带其他头（比如Authorization），也要加到这里
     }));
     

  其他后端框架（Spring、Django等）也有对应的CORS配置方式，核心都是允许你的前端origin，并且正确处理OPTIONS预请求。

• 开发环境用React代理（不用改后端）
  React的开发服务器自带代理功能，能帮你转发请求绕过CORS限制：

  1. 在项目根目录的package.json里添加一行：

     "proxy": "http://***" // 这里填你的服务器地址，比如http://localhost:8080
     

  2. 修改Axios请求的URL，去掉域名部分：比如原来的axios.post('http://***/api/submit', data)改成axios.post('/api/submit', data)
  3. 重启React开发服务器，请求会通过React服务器转发，自然就不会有跨域问题了。

• 为啥POST用插件没用？
  你的POST请求大概率是「复杂请求」——比如Content-Type设为application/json，这时候浏览器会先发送一个OPTIONS预请求，询问服务器是否允许跨域。如果服务器没正确响应OPTIONS请求（返回400），就算插件想帮忙也没用，因为预请求已经被拒绝了。

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