Next.js API CORS跨域问题求助：配置自定义头后仍无法跨域请求

可能的原因及解决办法 #

• 未处理OPTIONS预请求
  浏览器发起非简单跨域请求（比如POST带JSON数据）时，会先发送OPTIONS预请求验证权限。你的next.config.js配置虽然设置了允许的方法，但如果API路由本身没有处理OPTIONS请求，可能导致预请求失败。

  可以在API路由文件里直接处理OPTIONS方法，或者用Next.js的中间件统一处理：

  // 示例：在/api/subscribe.js中添加
  export default function handler(req, res) {
    if (req.method === 'OPTIONS') {
      res.status(200).end();
      return;
    }
    // 后续处理POST等其他请求逻辑
  }
  

• 缺少必要的响应头
  如果你的请求带了自定义请求头或者Content-Type为application/json，需要在CORS配置中补充Access-Control-Allow-Headers：

  // 修改next.config.js的headers配置
  module.exports = {
    async headers() {
      return [
        {
          source: "/api/(.*)",
          headers: [
            { key: "Access-Control-Allow-Origin", value: "*" },
            { key: "Access-Control-Allow-Methods", value: "GET,DELETE,POST,PUT,OPTIONS" },
            { key: "Access-Control-Allow-Headers", value: "Content-Type, Authorization" } // 根据实际请求头调整
          ]
        }
      ];
    }
  };
  

• 浏览器缓存旧响应
  浏览器可能缓存了之前的CORS响应头，尝试清除浏览器缓存，或者用Ctrl+Shift+R强制刷新页面后再测试。

• 部署平台的额外配置冲突
  如果是在Vercel、Netlify等平台部署，平台可能有独立的CORS设置，可能会覆盖next.config.js的配置。需要检查平台的项目设置，确保没有冲突的CORS规则。

• next.config.js配置未生效
  确认修改next.config.js后重启了开发服务器，生产环境重新部署了应用。有时候配置修改后需要重新构建才能生效。

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