React应用CORS问题解决求助：求详细分步方案与代码示例

1. 开发环境用代理配置（最实用） #

开发阶段优先用这个，不用改后端，直接在React项目里配置：

单域名简单代理 #

• 打开项目根目录的package.json，添加proxy字段：

  {
    "name": "your-react-app",
    "version": "0.1.0",
    "proxy": "https://目标API域名.com"
  }
  

• 重启开发服务器，之后请求直接写相对路径：

  // 原本的跨域请求：fetch('https://目标API域名.com/api/data')
  // 现在改成：
  fetch('/api/data')
    .then(res => res.json())
    .then(data => console.log(data))
  

多域名复杂代理 #

如果要请求多个不同域名的API，用http-proxy-middleware：

1. 安装依赖：

   npm install http-proxy-middleware --save-dev
   

2. 在src目录新建setupProxy.js：

   const { createProxyMiddleware } = require('http-proxy-middleware');
   
   module.exports = function(app) {
     // 代理第一个API域名
     app.use(
       '/api1',
       createProxyMiddleware({
         target: 'https://api-domain1.com',
         changeOrigin: true,
         pathRewrite: { '^/api1': '' } // 去掉请求前缀，按需设置
       })
     );
     // 代理第二个API域名
     app.use(
       '/api2',
       createProxyMiddleware({
         target: 'https://api-domain2.com',
         changeOrigin: true,
         pathRewrite: { '^/api2': '' }
       })
     );
   };
   

3. 重启服务器后，请求对应前缀路径：

   fetch('/api1/data') // 实际转发到https://api-domain1.com/data
   fetch('/api2/info') // 实际转发到https://api-domain2.com/info
   

2. 后端配置CORS响应头（最彻底） #

生产环境的标准解法，需要后端配合设置响应头，以Node.js/Express为例：

1. 安装cors包：

   npm install cors
   

2. 代码配置：

   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   // 开发环境可允许所有域名，生产建议指定具体域名
   // app.use(cors());
   
   // 生产环境指定允许的域名
   const allowedOrigins = ['https://your-react-domain.com', 'http://localhost:3000'];
   app.use(cors({
     origin: function(origin, callback) {
       if (!origin || allowedOrigins.indexOf(origin) !== -1) {
         callback(null, true);
       } else {
         callback(new Error('Not allowed by CORS'));
       }
     }
   }));
   
   app.get('/api/data', (req, res) => {
     res.json({ message: '数据返回成功' });
   });
   
   app.listen(5000);
   

其他后端语言（Java、Python等）核心都是设置这几个响应头：

Access-Control-Allow-Origin: 允许的域名或*
Access-Control-Allow-Methods: GET, POST, PUT, DELETE
Access-Control-Allow-Headers: Content-Type, Authorization

3. JSONP（仅适用于GET请求） #

老方案，只能处理GET请求，适合一些无法改后端的场景：

function fetchDataWithJSONP() {
  const script = document.createElement('script');
  script.src = 'https://目标API域名.com/api/data?callback=handleJSONPResponse';
  document.body.appendChild(script);

  window.handleJSONPResponse = function(data) {
    console.log(data);
    // 清理临时脚本和全局函数
    document.body.removeChild(script);
    delete window.handleJSONPResponse;
  };
}

4. 生产环境用Nginx反向代理 #

部署时用Nginx把React静态文件和API请求统一转发，避免跨域：

server {
  listen 80;
  server_name your-domain.com;

  # 处理React静态文件
  location / {
    root /path/to/react/build;
    try_files $uri $uri/ /index.html;
  }

  # 转发API请求到目标域名
  location /api {
    proxy_pass https://目标API域名.com;
    proxy_set_header Host $host;
    proxy_set_header X-Real-IP $remote_addr;
  }
}

配置后，React里请求/api/data就会被Nginx转发到目标API，不会触发CORS。

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