React+Flask+Node.js跨域问题求助：CORS策略阻止请求

问题根源 #

核心问题是：Flask的CORS配置仅对自身服务生效，无法管控Node.js服务的跨域规则。错误提示里的Access-Control-Allow-Origin: http://localhost:5000，说明你的请求要么被React代理错误转发到了Flask（但实际目标是Node），要么Node服务返回了不符合要求的跨域头（前者概率更高，因为你配置了React代理指向5000）。

方案一：调整React代理，区分转发Flask和Node接口 #

如果React需要同时调用两个服务的接口，不能只配置单一代理目标，需按路径分流：

1. 安装http-proxy-middleware（React 17+推荐用该工具替代package.json的简单代理）：

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

2. 在React项目src目录下新建setupProxy.js，添加配置：

const { createProxyMiddleware } = require('http-proxy-middleware');

module.exports = function(app) {
  // 转发Flask接口（示例：所有/api开头的请求）
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:5000',
      changeOrigin: true,
    })
  );
  // 转发Node.js的/insert接口
  app.use(
    '/insert',
    createProxyMiddleware({
      target: 'http://localhost:8080',
      changeOrigin: true,
    })
  );
};

3. 重启React开发服务器，之后React调用/insert时会自动转发到Node服务，此时请求源与Node服务同源，不会触发跨域。

方案二：直接给Node.js服务配置CORS #

如果不想通过代理，让React直接请求Node服务，需在Node端允许http://localhost:3000的跨域访问：

若使用Express框架： #

1. 安装cors包：

npm install cors --save

2. 在Node服务代码中添加配置：

const express = require('express');
const cors = require('cors');
const app = express();

// 允许localhost:3000的请求
app.use(cors({
  origin: 'http://localhost:3000',
  credentials: true // 若需携带Cookie则添加
}));

// 你的/insert接口逻辑
app.post('/insert', (req, res) => {
  res.send('插入操作完成');
});

app.listen(8080, () => {
  console.log('Node服务运行在8080端口');
});

原生Node.js（无框架）： #

手动在响应头添加跨域字段：

const http = require('http');

const server = http.createServer((req, res) => {
  if (req.url === '/insert' && req.method === 'POST') {
    // 设置跨域允许规则
    res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
    res.setHeader('Access-Control-Allow-Methods', 'POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
    
    // 处理OPTIONS预检请求
    if (req.method === 'OPTIONS') {
      res.writeHead(200);
      res.end();
      return;
    }
    
    // 接口业务逻辑
    res.writeHead(200, {'Content-Type': 'application/json'});
    res.end(JSON.stringify({status: 'success'}));
  }
});

server.listen(8080);

方案三：检查请求路径是否正确 #

确认React中调用的地址符合配置：

• 用代理时，调用/insert而非http://localhost:8080/insert
• 不用代理时，直接调用http://localhost:8080/insert，同时确保Node端CORS配置正确

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