Node.js后端接口跨域问题：React前端GET请求报TypeError: Failed to fetch

问题根源 #

你在前端设置Access-Control-Allow-Origin: *完全没用——这个响应头必须由Node.js服务器返回给浏览器，浏览器才会允许跨域请求。前端请求里添加这个头不会被浏览器认可，这就是为什么你仍然看到CORS错误。

解决方案 #

方法1：使用cors中间件（推荐）

这是最简便的方式，直接用官方维护的cors包处理所有CORS配置：

1. 安装依赖：

   npm install cors
   

2. 在你的Node.js服务器代码中引入并使用：

   const express = require('express');
   const cors = require('cors');
   const axios = require('axios');
   const app = express();
   
   // 允许所有域名跨域请求（开发环境可用，生产环境建议指定具体域名）
   app.use(cors());
   
   // 生产环境示例：只允许你的React前端域名访问
   // app.use(cors({ origin: 'https://your-react-app-domain.com' }));
   
   app.get('/retrieveQuestion', async (req, res) => {
     try {
       // 调用MongoDB API的逻辑
       const response = await axios.get('你的MongoDB API地址');
       res.json(response.data);
     } catch (error) {
       res.status(500).json({ message: '获取数据失败', error: error.message });
     }
   });
   
   const PORT = process.env.PORT || 3001;
   app.listen(PORT, () => console.log(`服务器运行在端口${PORT}`));
   

方法2：手动设置响应头（不依赖第三方包）

如果不想用cors包，可以在接口路由中直接添加CORS响应头：

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

app.get('/retrieveQuestion', async (req, res) => {
  // 设置允许跨域的来源，*表示所有域名
  res.setHeader('Access-Control-Allow-Origin', '*');
  // 如果你的请求需要携带自定义头或凭证，还需要添加以下配置：
  // res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
  // res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');

  try {
    const response = await axios.get('你的MongoDB API地址');
    res.json(response.data);
  } catch (error) {
    res.status(500).json({ message: '获取数据失败', error: error.message });
  }
});

const PORT = process.env.PORT || 3001;
app.listen(PORT, () => console.log(`服务器运行在端口${PORT}`));

关键提醒 #

• 开发环境用*没问题，但生产环境一定要替换成你的前端实际域名，避免安全风险。
• 服务器端调用MongoDB API不受浏览器CORS限制，所以你直接访问Node.js接口正常，只有浏览器发起的跨域请求才会触发CORS检查。

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