React测试时如何开启CORS？Java非Spring后端跨域问题

方法1：配置React开发服务器代理（推荐） #

React内置的开发服务器支持代理配置，只需修改项目根目录的package.json，无需改动任何业务代码：

1. 在package.json末尾添加代理字段，值为你的后端服务地址（比如后端跑在http://localhost:8080）：

"proxy": "http://localhost:8080"

2. 重启React开发服务器（停止当前npm run start，重新执行）
   此后React发起的请求会自动通过开发服务器转发到后端，绕过浏览器的CORS检查。

方法2：关闭Chrome/Safari的CORS安全检查（快速临时方案） #

适合临时测试，仅用于本地开发环境，不要用此模式访问公共网站：

• Windows：右键Chrome快捷方式 → 属性 → 目标栏末尾添加参数（注意前面加空格）：

--disable-web-security --user-data-dir="C:/ChromeDevSession"

（C:/ChromeDevSession是自定义的用户数据目录，需确保路径存在）

• Mac：打开终端执行：

open -n -a "Google Chrome" --args --disable-web-security --user-data-dir="/tmp/ChromeDevSession"

• Safari：打开Safari偏好设置 → 高级 → 勾选「显示开发菜单」，然后在顶部菜单「开发」中选择「禁用跨域限制」。

方法3：自建极简Node代理服务器 #

替代失效的CORS Anywhere，自己写个几行代码的代理：

1. 新建proxy.js文件，内容如下：

const http = require('http');
const httpProxy = require('http-proxy');

const proxy = httpProxy.createProxyServer({});
const targetUrl = 'http://你的后端服务地址'; // 替换为实际后端地址

http.createServer((req, res) => {
  // 添加CORS允许头
  res.setHeader('Access-Control-Allow-Origin', '*');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', '*');

  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    res.writeHead(200);
    res.end();
    return;
  }

  // 转发请求到后端
  proxy.web(req, res, { target: targetUrl });
}).listen(3001);

2. 安装依赖：

npm install http-proxy --save-dev

3. 启动代理服务器：

node proxy.js

4. 修改React中的请求地址为http://localhost:3001，即可绕过CORS限制。

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