跨域报错本质是浏览器同源策略拦截响应，而非前端代码错误；请求已到达后端并返回，但因响应头缺失或不合规（如缺少Access-Control-Allow-Origin、预检失败、credentials与*冲突等），浏览器拒绝将数据交给JavaScript。
跨域报错不是前端代码写错了，而是浏览器在执行同源策略时发现响应头缺失或不合规，直接把返回的数据“扣下”了。请求其实已发到后端、后端也处理并返回了，只是前端 JavaScript 拿不到。快速排查的核心就三点：看控制台报错类型、查 Network 里响应头、分清是主请求还是 OPTIONS 预检失败。
第一步：看控制台报错关键词，锁定问题类型
浏览器控制台的错误信息已经指明了方向，不用猜，直接按提示走：
- “No 'Access-Control-Allow-Origin' header is present”：主请求响应里完全没这个头，后端压根没配 CORS，或中间件/路由没走到配置逻辑
- “Origin is not allowed by Access-Control-Allow-Origin”：头存在，但值不匹配当前页面地址（比如写了 * 却带 credentials，或写了 http://localhost:3000 但实际页面是 http://127.0.0.1:3000）
- “CORS preflight channel did not succeed” 或 “preflight is invalid”：OPTIONS 请求失败，重点检查预检响应头是否完整、状态码是不是 200/204、有没有被其他中间件拦截
- “The value of the 'Access-Control-Allow-Origin' header must not be the wildcard '*' when the request's credentials mode is 'include'”：带 Cookie 或 Authorization 时用了 *，必须改用具体域名，并同步加 Access-Control-Allow-Credentials: true
第二步：进 Network 面板，逐个核对响应头
点开报错的请求 → 切到 Headers 标签页 → 往下拉看 Response Headers：
- 主请求（如 GET/POST）必须有：Access-Control-Allow-Origin（值为具体域名或 *）、Access-Control-Allow-Methods（含当前方法）、Access-Control-Allow-Headers（含你发的所有非简单头，如 Authorization）
- 如果看到请求方法是 OPTIONS，那就点开它单独看：它的响应头必须包含上述三项，且状态码是 200 或 204；不能返回 404、500，也不能跳转或空响应
- 检查 Origin 请求头值（在 Request Headers 里）是否和后端白名单完全一致——注意协议、域名、端口一个都不能差，http://localhost:3000 和 https://localhost:3000 是两个源
第三步：确认是否触发预检，针对性处理
以下任一情况都会触发浏览器自动发 OPTIONS 请求，必须确保后端对 OPTIONS 方法有明确响应：
- 请求方法是 PUT、DELETE、PATCH
- 设置了自定义请求头（如 X-Request-ID、X-Auth-Token）
- Content-Type 是 application/json、application/xml 等非简单类型
常见错误是后端只给 GET/POST 配了 CORS 头，却忘了 OPTIONS 路由——它需要独立处理，不执行业务逻辑，只返回头 + 空体 + 204 状态码。
第四步：开发期临时绕过（仅限本地调试）
生产环境必须靠后端配 CORS，但本地联调可快速验证是否前端问题：
- Vite 项目：在 vite.config.ts 中加 proxy，把 /api 代理到后端地址，让请求变同源
- Webpack（Vue CLI/React Scripts）：在 vue.config.js 或 setupProxy.js 里配代理规则
- 绝对不要用浏览器插件禁用同源策略，或启动 Chrome 加 --disable-web-security 参数——这会掩盖真实问题，上线必崩
