React项目中Express配置CORS遇content-type不被允许问题求助

这个错误是因为你的Express服务器没有在CORS配置中允许Content-Type请求头，导致浏览器的预请求（OPTIONS）被拦截。以下是两种快速解决的方法：

方法一：使用cors包（推荐） #

• 首先安装cors依赖：

npm install cors

• 在Express入口文件（比如app.js或server.js）中配置：

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

// 配置CORS规则
const corsConfig = {
  origin: 'http://localhost:3000', // 你的React项目地址
  allowedHeaders: ['Content-Type', 'Authorization'], // 明确包含Content-Type
  methods: ['GET', 'POST', 'PUT', 'DELETE', 'OPTIONS'] // 允许所有常用请求方法
};

// 应用CORS中间件
app.use(cors(corsConfig));

// 后续配置解析和路由
app.use(express.json());
app.use('/dreams/api/user', require('./routes/user'));

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

方法二：手动配置CORS头（无需额外包） #

如果不想用cors包，可以手动设置响应头：

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

// 处理OPTIONS预请求
app.options('*', (req, res) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  res.sendStatus(200);
});

// 全局设置CORS头
app.use((req, res, next) => {
  res.setHeader('Access-Control-Allow-Origin', 'http://localhost:3000');
  res.setHeader('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
  res.setHeader('Access-Control-Allow-Headers', 'Content-Type, Authorization');
  // 直接响应OPTIONS请求，不进入后续路由
  if (req.method === 'OPTIONS') {
    return res.sendStatus(200);
  }
  next();
});

// 后续配置
app.use(express.json());
app.use('/dreams/api/user', require('./routes/user'));

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

注意事项 #

• 确保origin的值和你的React项目地址完全一致（比如是http://localhost:3000，不要末尾加斜杠）
• 若需允许多个前端地址，可将origin设为数组（如['http://localhost:3000', 'https://your-prod-domain.com']），或用函数动态验证
• 修改配置后必须重启Express服务器，否则新配置不会生效

内容的提问来源于stack exchange，提问作者Shashimal Kawinda Wanninayake