调用自定义登录认证API遇CORS拦截，如何排查问题根源？

安全阿岳

2026-6-29

排查CORS错误的步骤

首先明确核心原因：Postman、curl这类测试工具不受浏览器的同源策略约束，所以能正常访问；但浏览器运行的前端代码必须遵守CORS规则，要求服务器返回指定的响应头才能允许跨域请求。以下是具体排查步骤：

1. 核对代码请求与测试工具的一致性

检查请求方法（GET/POST等）、请求头（比如Content-Type、自定义头）、参数/请求体是否和测试工具里的配置完全一致。
比如测试工具用form-data格式提交，代码里用了application/json，此时Content-Type属于非简单请求头，会触发浏览器发送OPTIONS预请求；如果服务器没处理OPTIONS请求，就会出现你遇到的错误。

用curl手动发送OPTIONS预请求，检查服务器返回的响应头：

curl -X OPTIONS -H "Origin: http://localhost:5174" -i "你的API地址"

重点看返回头里是否存在：

如果上述头不存在或不匹配，问题肯定出在服务器/API提供商的CORS配置上。

检查是否在请求中添加了自定义请求头（比如X-User-Token），这类头会触发预请求，需要服务器在Access-Control-Allow-Headers中明确允许。
确认确实是跨域请求：API地址和你的http://localhost:5174在协议、域名、端口三者中任意一个不同，就属于跨域，必须遵守CORS规则。

如果确认是服务器端配置问题，直接联系客户/API提供商，提供你的前端域名（包括开发环境的http://localhost:5174和生产环境域名），要求他们：
- 在服务器配置中添加Access-Control-Allow-Origin并包含你的域名
- 确保服务器能正确响应OPTIONS预请求
- 根据你的请求需求配置Access-Control-Allow-Methods和Access-Control-Allow-Headers
开发阶段临时绕开：使用前端框架的开发代理功能，比如Vue的vue.config.js或React的setupProxy.js，将API请求代理到目标地址，让浏览器认为是同源请求。示例（Vue）：
```
module.exports = {
  devServer: {
    proxy: {
      '/auth': {
        target: '你的API地址',
        changeOrigin: true,
        pathRewrite: { '^/auth': '' }
      }
    }
  }
}
```
之后代码中请求/auth/login即可被代理到目标API，避免CORS错误。

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