Express+MongoDB API在Next.js中POST请求遇CORS错误

一、先修复Next.js中fetch的核心错误 #

你的POST请求存在一个致命问题：设置了Content-type: application/json头，但请求体直接传入了JavaScript对象，没有转换为JSON字符串。浏览器会自动将请求的Content-Type改为text/plain，导致后端无法解析请求体，同时触发CORS预请求（OPTIONS）处理异常。

修改后的getData函数：

function getData () {
    fetch('http://localhost:3000/api/auth/login', {
        method: 'POST',
        headers: {
            'Content-type': 'application/json'
        },
        // 必须用JSON.stringify将对象转为JSON字符串
        body: JSON.stringify({
            email: "ceo-jedidiah@xenon-inc.in",
            password: "M!nnu2009"
        })
    })
    .then(res => res.json())
    .then(data => console.log(data))
    .catch(err => console.error('请求错误:', err)) // 新增错误捕获，方便排查问题
}

二、检查并修正Express的CORS配置 #

即便引入了cors库，配置不当仍会导致POST请求的CORS错误，以下是常见问题及修复方式：

1. 确保CORS中间件优先加载 #

Express中间件按执行顺序生效，如果cors中间件放在路由之后，请求会先被路由处理，此时还未设置CORS头，直接触发跨域错误。

正确的Express入口文件示例：

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

// 先加载CORS中间件
app.use(cors({
    origin: 'http://localhost:3001', // 替换为你的Next.js运行地址（比如默认3000，注意和API端口区分）
    methods: ['GET', 'POST', 'OPTIONS'],
    allowedHeaders: ['Content-Type']
}));

// 再加载请求体解析和路由
app.use(express.json()); // 必须添加，用于解析JSON格式的请求体
app.use('/api/auth', require('./routes/auth'));

app.listen(3000, () => console.log('API运行在3000端口'));

2. 明确指定允许的Origin #

如果Next.js和API运行在不同端口（比如API在3000，Next在3001），不要用默认的*（会限制带凭证的请求），需指定精确的来源地址。若需支持多环境，可使用动态Origin配置：

const allowedOrigins = ['http://localhost:3001', 'https://your-production-domain.com'];
app.use(cors({
    origin: (origin, callback) => {
        // 允许无origin的请求（比如Postman）或在白名单内的请求
        if (!origin || allowedOrigins.includes(origin)) {
            callback(null, true);
        } else {
            callback(new Error('Not allowed by CORS'));
        }
    }
}));

3. 确认后端能解析JSON请求体 #

必须在Express中添加express.json()中间件，否则后端无法解析你发送的JSON请求体，会导致请求处理失败，间接引发CORS相关错误。

三、额外排查方向 #

• 打开浏览器控制台的Network标签，查看OPTIONS请求的响应头，确认Access-Control-Allow-Origin、Access-Control-Allow-Methods、Access-Control-Allow-Headers是否正确返回；
• 若API中有自定义鉴权中间件，需确保OPTIONS请求不会被拦截（cors库通常会自动处理OPTIONS，但自定义中间件需跳过这类请求）。

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