NextJS预检请求返回200但POST请求报CORS错误的求助

核心问题分析 #

你当前的next.config.js里的headers配置是给NextJS自身返回的页面/静态资源添加响应头，完全不影响API请求的CORS校验——因为CORS是浏览器和目标example.com服务器之间的限制，给前端页面加跨域头毫无意义。而单独的server.js重写配置如果没正确集成到NextJS服务中，也不会生效。

另外，预检请求返回200但实际请求报错，大概率是因为浏览器直接请求example.com时，目标服务器的实际请求响应头不符合CORS规则（比如漏返回Access-Control-Allow-Origin），或者你的请求带了服务端未允许的字段。

可行方案（无需修改服务端） #

方案1：用NextJS内置重写做反向代理（推荐） #

通过NextJS的rewrites配置，把前端请求转发到example.com，让浏览器和NextJS同域，彻底规避CORS问题：

1. 修改next.config.js，添加重写规则：

/** @type {import('next').NextConfig} */
const nextConfig = {
  async rewrites() {
    return [
      {
        // 匹配前端发起的/api开头的请求
        source: '/api/:path*',
        // 转发到example.com对应路径
        destination: 'https://example.com/:path*',
      },
    ];
  },
};

module.exports = nextConfig;

2. 前端请求时，把目标地址从https://example.com/xxx改成/api/xxx，比如：

// 原来的错误写法
fetch('https://example.com/users')

// 修改后的写法
fetch('/api/users')

这样NextJS会作为中间代理转发请求，浏览器只和本地NextJS服务通信，不会触发CORS校验。

方案2：检查实际请求的响应头 #

如果不想用代理，打开浏览器开发者工具的Network面板，查看**实际请求（非OPTIONS预检）**的响应头：

• 确认是否存在access-control-allow-origin: *，如果没有，说明服务端仅在预检请求时返回该头，实际请求未返回，这是服务端的问题（但你无法修改的话只能用方案1）。
• 确认你的请求中是否携带了access-control-allow-headers之外的头（比如X-Requested-With），如果有，会触发CORS错误，需要移除这些额外头。

方案3：确保请求不携带Credentials #

如果你的请求默认携带了cookie或HTTP认证信息（比如fetch的credentials默认是same-origin），即使服务端设置了access-control-allow-origin: *也会失效，因为*和credentials: true不兼容。你可以在请求时显式关闭credentials：

fetch('https://example.com/users', {
  credentials: 'omit' // 不携带任何认证信息
})

为什么之前的配置无效？ #

• next.config.js的headers配置：仅作用于NextJS输出的HTML、JS、CSS等静态资源，和API请求的CORS无关。
• 单独的server.js重写：如果是自定义NextJS服务，需要正确调用rewrites并集成到服务器实例中，否则不会生效，不如直接在next.config.js中配置更可靠。

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