使用fetch() API无法获取数据，跨域请求被阻止问题求助

阿华AIGC实验室

2026-5-19

解决React与Express跨域请求的CORS问题

你遇到的是典型的**跨域资源共享（CORS）**问题——因为你的React客户端运行在localhost:3000，而Express服务器在localhost:3005，属于不同端口，浏览器的同源策略会默认阻止这种跨域请求。下面给你几种实用的解决方法：

方法一：在Express服务器中使用`cors`中间件

这是最直接高效的方案，专门用于处理CORS请求：

先在你的Express项目里安装cors包：

npm install cors

在Express入口文件（比如server.js或app.js）中引入并启用它：

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

// 开发环境可以允许所有来源，生产环境建议限制特定域名
app.use(cors());

// 或者精准限制仅React客户端域名访问（更安全）
// app.use(cors({ origin: 'http://localhost:3000' }));

// 你的API路由
app.get('/api', (req, res) => {
  res.json({ message: '数据请求成功！' });
});

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

方法二：手动设置Express响应头

如果不想额外安装依赖，可以直接在服务器中配置CORS相关响应头：

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

// 在所有路由前添加CORS配置
app.use((req, res, next) => {
  // 允许React客户端的域名发起请求
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  // 允许的请求方法
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE');
  // 允许携带的请求头类型
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  next();
});

app.get('/api', (req, res) => {
  res.json({ message: '数据请求成功！' });
});

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

方法三：在React中配置代理（仅适合开发环境）

这种方法无需修改服务器代码，通过React的代理功能转发请求：

在React项目的package.json文件中添加proxy字段：

{
  "name": "your-react-app",
  "version": "0.1.0",
  "proxy": "http://localhost:3005", // 填写你的Express服务器地址
  // ...其他原有配置
}

修改React中的fetch请求，只需写相对路径即可：

// 原来的请求：fetch('http://localhost:3005/api')
// 修改后的请求：
fetch('/api')
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

注意：修改package.json后需要重启React开发服务器才能生效。