Nextjs POST请求遇CORS错误，GET及Postman请求正常

问题根源 #

你的POST请求触发了浏览器的预检OPTIONS请求，但当前API路由没有处理这个请求类型，导致预检响应里没有返回你设置的CORS头，浏览器直接拦截了后续的POST请求。GET请求不需要触发预检，所以能正常工作。

解决方案 #

方案1：在API路由中显式处理OPTIONS请求 #

修改你的API路由文件，先判断请求方法，如果是OPTIONS，直接返回带CORS头的响应；如果是其他方法（GET/POST等），再执行原有业务逻辑：

export default async function handler(req, res) {
  // 处理OPTIONS预检请求
  if (req.method === 'OPTIONS') {
    res.headers.append("Access-Control-Allow-Origin", req.headers.get('origin'));
    res.headers.append("Access-Control-Allow-Methods", "GET, POST, PATCH, DELETE");
    res.headers.append("Access-Control-Allow-Headers", "Content-Type");
    return res.status(200).end();
  }

  // 处理GET/POST等业务逻辑
  if (req.method === 'GET') {
    // 原有GET逻辑
    res.headers.append("content-type", "application/json");
    res.headers.append("Access-Control-Allow-Origin", req.headers.get('origin'));
    res.status(200).json({ message: 'GET success' });
  } else if (req.method === 'POST') {
    // 原有POST逻辑
    res.headers.append("content-type", "application/json");
    res.headers.append("Access-Control-Allow-Origin", req.headers.get('origin'));
    // 处理POST数据
    res.status(201).json({ message: 'POST success' });
  } else {
    res.setHeader('Allow', ['GET', 'POST', 'OPTIONS']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

方案2：使用cors库简化配置 #

安装官方推荐的cors包，减少手动配置的繁琐：

npm install cors
# 或者
yarn add cors

然后在API路由中引入并使用：

import Cors from 'cors';

// 初始化cors中间件
const cors = Cors({
  origin: req => req.headers.get('origin'), // 允许请求来源的origin
  methods: ['GET', 'POST', 'PATCH', 'DELETE'],
  allowedHeaders: ['Content-Type'],
});

// 辅助函数：执行中间件
function runMiddleware(req, res, fn) {
  return new Promise((resolve, reject) => {
    fn(req, res, (result) => {
      if (result instanceof Error) {
        return reject(result);
      }
      return resolve(result);
    });
  });
}

export default async function handler(req, res) {
  // 先执行cors中间件
  await runMiddleware(req, res, cors);

  // 后续业务逻辑
  if (req.method === 'POST') {
    // 处理POST请求
    res.status(201).json({ message: 'POST success' });
  } else if (req.method === 'GET') {
    // 处理GET请求
    res.status(200).json({ message: 'GET success' });
  } else {
    res.setHeader('Allow', ['GET', 'POST']);
    res.status(405).end(`Method ${req.method} Not Allowed`);
  }
}

验证要点 #

• 确认req.headers.get('origin')能正确获取到http://localhost:5173，如果为空可以临时写死"http://localhost:5173"测试（生产环境不建议）。
• 检查axios请求是否携带Content-Type: application/json头，这是触发预检的常见原因，确保你的CORS配置里允许了这个头。

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