跨域问题本质是浏览器基于同源策略限制响应读取，而非网络不通；90% CORS报错源于前后端对请求类型、凭证或预检逻辑理解不一致，或忽略私网拦截等第二层安全策略。
前端代码发不出请求？不，是浏览器把响应“扣下了”。跨域问题本质不是网络不通，而是浏览器基于同源策略（协议+域名+端口三者完全一致）对响应的读取权限做了限制。团队协作中，90% 的 CORS 报错并非后端没配头，而是前后端对请求类型、凭证、预检逻辑理解不一致，或忽略了浏览器第二层安全策略（如私网地址拦截、混合内容拦截）。规范处理的关键，在于建立统一排查路径和明确分工边界。
明确谁该看哪一层：前后端责任切分表
遇到控制台红字报错，先别改代码，打开 Network 面板看失败请求的状态码和响应头，再对照下表定位责任方：
- 状态码为 200，但响应头里没有 Access-Control-Allow-Origin → 后端未正确注入 CORS 头，或中间件（如 Nginx、网关）覆盖/清除了响应头
- 状态码为 404 或 500，且请求方法是 OPTIONS → 后端未实现或未暴露 OPTIONS 预检接口，属于后端配置缺失
- 状态码为空（(null)），Network 中看不到响应体，Preview/Response 标签页空白 → 浏览器在发送请求前就拦截了（如访问 192.168.x.x、localhost 与 127.0.0.1 混用、HTTPS 页面请求 HTTP 接口），属前端环境或部署配置问题
- 状态码为 200，响应头有 Access-Control-Allow-Origin: *，但报错提示 “credentials not supported” → 前端 fetch 设置了 credentials: 'include'，而后端 Allow-Origin 用了 *，违反规范，需前后端同步调整
统一开发环境：用代理抹平本地跨域
本地开发阶段，禁止让前端直接连后端真实地址（如 http://localhost:8080），否则会暴露所有环境差异（CORS、HTTPS、私网限制）。团队应强制使用 devServer 代理：
- Vite 项目：在 vite.config.ts 中配置
server.proxy，target 指向后端地址，changeOrigin: true必开 - Webpack/Vue CLI：在 vue.config.js 或 webpack.config.js 的 devServer.proxy 下统一定义 /api → http://backend:port
- 代理规则必须写进 README.md，并标注“仅限开发”，上线构建时自动失效；CI/CD 流水线不得依赖代理配置
标准化后端响应头：最小必要集合
后端同学不要手写 header 字符串，应使用框架官方 CORS 中间件（如 Express 的 cors、Spring Boot 的 @CrossOrigin、Nginx 的 add_header），并遵循以下最小集原则：
立即学习“Java免费学习笔记（深入）”；
- Access-Control-Allow-Origin：生产环境必须指定具体域名（如 https://app.company.com），禁用 *；若需多域名，由服务端根据 Origin 请求头动态回写（注意校验白名单）
- Access-Control-Allow-Credentials：只要前端可能带 cookie 或 Authorization，此项必须为 true，且 Origin 不能为 *
- Access-Control-Allow-Methods：显式列出实际支持的方法（GET, POST, PATCH, DELETE），不写 OPTIONS（浏览器自动推断）
- Access-Control-Allow-Headers：只列前端真实发送的自定义头（如 X-Trace-ID、Content-Type），避免通配符；简单请求头（Accept、Content-Language）无需声明
前端请求规范：避开预检与隐性陷阱
前端同学发请求前，自查三项，能规避 70% 的预检失败和拦截：
- 优先用 GET 获取数据；如需 POST，body 类型选
application/x-www-form-urlencoded或multipart/form-data，避免默认的application/json触发预检 - 不手动加 Origin、Referer 等敏感头；如需传 token，统一走 Authorization Bearer，而非自定义 X-Token
- 本地调试时，页面必须通过
http://localhost:xxx访问，禁用 file:// 协议双击打开 HTML；Chrome 启动参数--unsafely-treat-insecure-origin-as-secure="http://localhost:3000" --user-data-dir=/tmp/chrome-test仅限临时验证，不提交文档
