React前端调用API遭CORS拦截，如何实现前后端连通？

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

这是标准且可靠的解决方式，通过在后端服务中添加CORS响应头或使用对应框架的CORS中间件，直接允许前端域名的跨域请求。

1. Express.js后端（Node.js最常用框架） #

先安装cors中间件：

npm install cors

在后端入口文件（如app.js/server.js）中配置：

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

// 仅允许你的React项目域名跨域（开发环境为http://localhost:5173）
app.use(cors({
  origin: 'http://localhost:5173',
  credentials: true // 需要携带Cookie/认证信息时添加
}));

// 开发环境可临时允许所有域名（生产环境禁止）
// app.use(cors());

// 挂载你的API路由
app.use('/api', require('./routes/user'));

app.listen(5000, () => console.log('Server running on port 5000'));

2. 手动设置响应头（无需中间件） #

如果不想依赖第三方中间件，可在全局中间件中手动添加CORS头：

app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:5173');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  
  // 处理预检OPTIONS请求，直接返回200
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

二、前端配置代理（开发环境临时方案） #

如果后端暂时无法修改，可通过前端代理转发请求，规避跨域限制。

1. Vite项目（你的项目端口为5173，推测是Vite） #

在vite.config.js中添加代理配置：

import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:5000',
        changeOrigin: true,
        // 若后端路由不带/api前缀，需添加此行重写路径
        // rewrite: (path) => path.replace(/^\/api/, '')
      }
    }
  }
});

修改前端fetch请求为相对路径：

const res = await fetch(`/api/user/update/${currentUser._id}`, {
  method: "POST",
  headers: {
    "Content-Type": "application/json"
  },
  body: JSON.stringify(formData)
});

重启Vite开发服务器后，请求会自动转发到后端，不会触发CORS。

2. Create React App项目 #

在package.json中添加proxy字段：

{
  "name": "your-react-app",
  "proxy": "http://localhost:5000",
  // 其他配置项...
}

同样将前端请求改为相对路径，重启开发服务器即可。

注意事项 #

• 生产环境禁止使用前端代理，必须通过后端配置CORS，或通过Nginx等工具将前后端部署在同一域名/子域名下。
• 不要设置mode: 'no-cors'，这种方式会让请求变为无法读取响应内容的opaque response，完全满足不了更新用户信息的需求。

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