React无法获取Node.js后端数据？问题排查与解决方案

问题原因 #

这是**跨域资源共享（CORS）**限制导致的。React开发服务器默认运行在localhost:3000，你的后端服务在localhost:3001，浏览器的同源策略会阻止不同端口之间的直接请求——哪怕单独请求后端API正常，前端也无法获取数据。

解决方案 #

方案一：后端配置CORS（推荐） #

通过在Express后端添加CORS支持，允许前端的跨域请求：

1. 切换到后端目录，安装cors包：

cd backend
npm install cors

2. 修改app.js，引入并启用cors：

const express = require('express');
const cors = require('cors'); // 新增引入
const app = express();
const port = 3001;

app.use(cors()); // 新增：允许所有来源的跨域请求

// 原有路由代码保持不变
app.get('/api/data', (req, res) => {
  const currentDate = new Date();
  const msg = 'constant message from backend'; // 补充const声明，避免全局变量污染
  const data = { message: msg };
  res.json(data);
});

app.get('/api/datetime', (req, res) => {
  const currentDate = new Date();
  const response = {
    date: currentDate.toDateString(),
    time: currentDate.toTimeString(),
  };
  res.json(response);
});

app.listen(port, () => {
  console.log(`Microservice is running on port ${port}`);
});

3. 重启后端服务，刷新前端页面即可正常获取数据。

方案二：React配置代理（无需修改后端） #

通过React开发服务器的代理功能，将前端请求转发到后端：

1. 切换到前端目录，安装代理依赖：

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

2. 在前端项目根目录（和package.json同级）创建setupProxy.js文件，添加以下内容：

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

module.exports = function(app) {
  app.use(
    '/api',
    createProxyMiddleware({
      target: 'http://localhost:3001',
      changeOrigin: true,
    })
  );
};

3. 修改MicroserviceComponent.js中的请求地址为相对路径：

// 把原来的绝对路径改成相对路径
const microserviceUrl = '';

// 或者直接简化fetch请求：
fetch('/api/data')
// ... 其余代码不变

4. 重启React开发服务器，前端就能正常获取后端数据了。

额外检查点 #

• 确保后端服务（node app.js）和React开发服务器（npm start）都在运行
• 打开浏览器开发者工具（F12），查看Console面板是否有CORS相关报错，Network面板确认请求是否成功发送

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