React应用与Express服务端口不同引发CORS跨域问题求助

Hey, let's fix your CORS issue and the small bugs in your Express code step by step:

1. 先修正Express服务端的基础错误 #

你的服务端代码有两个容易忽略的小问题：

• 路由路径缺失开头斜杠：app.post('api', ...) 应该改成 app.post('/api', ...)，没有斜杠的话Express无法正确匹配http://localhost:3001/api这个请求地址
• 监听端口要和React区分开：必须用app.listen(3001)，如果设成3000就会和React的开发服务器端口冲突，导致其中一个无法正常启动

2. 配置CORS解决跨域限制 #

浏览器的同源策略会阻止不同端口的前端向后端发请求，最简便可靠的解决方式是使用Express的cors中间件：

• 首先在你的Express项目里安装依赖：

  npm install cors
  

• 然后修改服务端代码，引入并启用CORS，同时别忘了解析JSON请求体（不然你拿不到React传过来的数据）：

  var express = require('express');
  var cors = require('cors');
  var app = express();
  
  // 启用CORS，允许所有来源的请求（开发环境下完全没问题）
  app.use(cors());
  
  // 解析JSON格式的请求体，这样request.body才会有值
  app.use(express.json());
  
  app.post('/api', (request, response)=>{
    console.log('收到前端数据:', request.body);
    // 一定要给前端返回响应，不然请求会一直处于pending状态
    response.status(200).json({status: 'success', message: '数据已接收'});
  });
  
  app.listen(3001, () => {
    console.log('Express服务运行在 http://localhost:3001');
  });
  

3. 优化React的fetch请求（可选但推荐） #

给fetch加上响应和错误处理，方便你调试请求状态：

post = () => {
  const client_data = {info: this.state.input};
  const options = {
    method: "POST",
    headers: { "Content-Type": "application/json" },
    body: JSON.stringify(client_data)
  }
  fetch("http://localhost:3001/api", options)
    .then(res => res.json())
    .then(data => {
      console.log('服务端响应:', data);
      // 这里可以做成功后的逻辑，比如清空输入框
    })
    .catch(err => console.error('请求出错:', err));
}

为什么不推荐用no-cors模式？ #

如果把fetch的mode设为no-cors，浏览器会返回一个无法读取内容的opaque响应，你既看不到服务端返回的数据，也无法判断请求是否成功，这种方式只适合完全不需要处理响应的场景，显然你的需求是和服务端交互，所以配置CORS才是正确的解决方案。

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