从localhost向远程服务器发起POST请求时遭遇CORS策略拦截错误

一、优先检查服务器端CORS配置 #

• 确认允许的源列表：部署后的前端域名（比如生产环境的https://xxx.vercel.app）必须被服务器的CORS配置包含，不能只添加本地的http://127.0.0.1:5173。
• 核对响应头：打开浏览器开发者工具的Network面板，查看请求的Response Headers，确认存在以下关键头：
  • Access-Control-Allow-Origin：值为你的生产前端域名（生产环境不推荐用*）
  • Access-Control-Allow-Methods：必须包含POST
  • Access-Control-Allow-Headers：如果请求带了自定义头（比如Authorization、Content-Type: application/json），要确保这些头被包含在此项中
• 适配Vercel部署特性：如果后端是Vercel Serverless Functions，可在API路由代码里手动设置CORS响应头，或在vercel.json中添加全局配置，示例：

  {
    "headers": [
      {
        "source": "/api/(.*)",
        "headers": [
          { "key": "Access-Control-Allow-Origin", "value": "你的生产前端域名" },
          { "key": "Access-Control-Allow-Methods", "value": "POST, OPTIONS" },
          { "key": "Access-Control-Allow-Headers", "value": "Content-Type, Authorization" }
        ]
      }
    ]
  }
  

二、排查前端请求细节 #

• 确认请求地址正确性：部署后要使用生产环境API地址，不能硬编码本地地址，建议用环境变量区分开发/生产环境的API路径。
• 检查预检请求：如果请求带了自定义头或非默认Content-Type（比如application/json），浏览器会先发送OPTIONS预检请求。查看Network面板中OPTIONS请求的状态，若它失败，POST请求必然被拦截，此时要确保服务器能正确响应OPTIONS请求并返回合法CORS头。
• 避免无效操作：前端手动添加Access-Control-Allow-Origin这类响应头毫无意义，这些头只能由服务器返回，前端添加会被浏览器忽略，甚至触发预检失败。

三、其他排查方向 #

• 检查CDN/反向代理：如果前端用了CDN或后端有反向代理，这些服务可能会修改CORS头，需要在对应服务层同步配置允许跨域的规则。
• 清除缓存：用浏览器无痕模式测试，避免旧的CORS配置缓存导致新配置不生效。
• 简化请求测试：先发送一个不带自定义头、Content-Type为application/x-www-form-urlencoded的简单POST请求，若成功再逐步添加原请求的参数和头，定位问题点。

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