通过Vercel部署应用时遇到CORS问题（已解决）

我最近在Vercel部署自己的应用时，碰到了烦人的CORS跨域问题，折腾一阵后终于搞定了，把亲测有效的解决方法分享出来：

• 通过vercel.json全局配置CORS规则
  在项目根目录创建或修改vercel.json文件，添加HTTP响应头规则来允许跨域请求。比如针对API路径配置：

  {
    "headers": [
      {
        "source": "/api/(.*)",
        "headers": [
          { "key": "Access-Control-Allow-Origin", "value": "https://your-frontend-domain.com" },
          { "key": "Access-Control-Allow-Methods", "value": "GET, POST, PUT, DELETE, OPTIONS" },
          { "key": "Access-Control-Allow-Headers", "value": "Content-Type, Authorization" }
        ]
      }
    ]
  }
  

  注意：生产环境别图省事用*允许所有来源，一定要指定你的前端域名，避免安全风险。

• 在API路由代码中手动设置响应头
  如果用Next.js这类框架的API路由，可以在处理函数里直接添加CORS头，适合需要更细粒度控制的场景。比如：

  export default function handler(req, res) {
    // 设置CORS允许的来源、方法和请求头
    res.setHeader('Access-Control-Allow-Origin', 'https://your-frontend-domain.com');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    res.setHeader('Access-Control-Allow-Headers', 'Content-Type');
  
    // 处理OPTIONS预检请求
    if (req.method === 'OPTIONS') {
      return res.status(200).end();
    }
  
    // 你的业务逻辑
    res.status(200).json({ data: 'Success' });
  }
  

  这种方式能针对单个API路由定制规则，灵活度更高。

• 确认部署生效
  配置完后重新部署应用，在浏览器开发者工具的网络面板里查看请求的响应头，确认Access-Control-Allow-Origin等字段已经正确设置，就能解决跨域问题了。

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