Next.js CORS报错：外部站点调用Next.js API跨域问题排查

你当前配置只声明了允许的请求方法，没有配置跨域核心的源校验规则，加上预检请求处理缺失、部署层配置冲突等问题，都会导致跨域报错，按以下顺序排查修复即可：

• 补全cors中间件核心配置
  cors包默认不会返回跨域必需的Access-Control-Allow-Origin响应头，你当前仅配置methods参数不足以开启跨域允许。调试阶段可临时允许所有源访问，生产环境必须替换为实际允许的外部站点域名列表：

const cors = initMiddleware(
  Cors({
    // 调试用值为"*"，生产环境替换为指定域名数组，例：['https://your-frontend.com']
    origin: "*",
    methods: ['GET', 'POST', 'OPTIONS'],
    // 如果前端请求携带自定义请求头、身份凭证，需要补充以下配置
    allowedHeaders: ['Content-Type', 'Authorization'],
    // 仅当前端请求开启withCredentials时配置为true，开启后origin不能设为"*"
    credentials: false
  })
)

• 单独处理OPTIONS预检请求
  浏览器发起跨域非简单请求时，会先发送OPTIONS方法的预检请求校验跨域权限，你当前逻辑会让预检请求继续走到业务返回逻辑，容易触发预检失败。需要在cors中间件执行后，给OPTIONS请求直接返回200状态码终止请求：

export default async function handler(req, res) {
  await cors(req, res)
  // 预检请求直接返回，不执行后续业务逻辑
  if (req.method === 'OPTIONS') {
    return res.status(200).end()
  }
  res.json({ message: 'Hello Everyone!' })
}

• 校验依赖安装状态
  确认项目已正确安装cors依赖，缺失依赖会导致中间件逻辑不生效，在项目根目录执行安装命令：

npm install cors
# 使用TypeScript的项目需要额外安装类型定义
npm install -D @types/cors

• 排查部署层配置冲突
  如果本地开发环境跨域正常、部署后报错，需要检查上层反向代理/CDN配置（Nginx、Cloudflare、Vercel路由规则等）是否覆盖了接口返回的CORS响应头，是否存在网关层单独配置的跨域规则与代码配置冲突。
  可通过curl命令直接请求接口校验响应头：

curl -I -X OPTIONS https://myapi.com/api/users -H "Origin: https://调用方站点地址"

若返回结果中不存在Access-Control-Allow-Origin字段，说明代码配置未生效；若字段存在但值与预期不符，说明origin配置错误；若本地curl返回头正常、浏览器访问仍报错，说明部署层代理/缓存拦截修改了响应头。

注意：如果开启credentials: true允许跨域携带Cookie、Authorization等身份凭证，origin配置绝对不能设置为通配符*，必须明确列出所有允许的源地址，否则浏览器会直接拦截请求。

内容的提问来源于stack exchange，提问作者RM-Digit