<p>fetch 报 CORS error 是因浏览器主动拦截跨域请求，而非网络故障；预检失败、响应头缺失或配置错误（如 Access-Control-Allow-Origin 为 * 时不能带 credentials）均会导致此问题。</p>
为什么 fetch 会报 CORS error 而不是网络错误
浏览器在发起跨域请求时，会先发一个 OPTIONS 预检请求（前提是请求带自定义 header、用 PUT/DELETE 方法，或 Content-Type 不是 application/x-www-form-urlencoded、multipart/form-data、text/plain 之一）。如果服务端没正确响应预检（比如没返回 Access-Control-Allow-Origin），fetch 就直接拒绝后续请求，控制台显示 CORS error —— 这不是后端挂了，而是浏览器主动拦截了。
常见误判点：
- 后端日志里根本没收到请求，就说明卡在预检阶段
- 用
curl或 Postman 能通，不代表前端能通（它们不执行 CORS 检查） -
localhost:3000和localhost:8080算不同源，也会触发跨域
fetch 请求加 mode: 'cors' 是默认行为，但必须配合后端
fetch 默认就是 mode: 'cors'，你显式写出来也没错，但起不了“绕过”作用。真正起效的是后端响应头。前端唯一可控的“降低限制”方式是：
- 确保请求不触发预检：用
GET/POST，不设自定义 header，Content-Type保持为application/x-www-form-urlencoded或text/plain - 需要带 cookie 时，必须同时设置：
credentials: 'include'+ 后端返回Access-Control-Allow-Credentials: true+Access-Control-Allow-Origin不能为*（必须指定确切域名） - 避免用
localhost和127.0.0.1混用，它们被浏览器视为不同源
开发阶段绕过 CORS 的真实可行方案
生产环境必须靠后端配 CORS，但开发时可临时规避：
立即学习“Java免费学习笔记（深入）”；
- 启动本地服务时加代理：Vite 用
server.proxy，Webpack Dev Server 用devServer.proxy，把/api/代理到后端地址，让请求看起来是同源的 - Chrome 启动时加
--disable-web-security --user-data-dir=/tmp/chrome-dev（仅限调试，关闭所有安全策略，切勿日常使用） - 用浏览器插件如
CORS Unblocked（原理是注入响应头，只对当前 tab 生效，且新版 Chrome 对插件权限收紧，不稳定）
注意：JSONP 已淘汰，不支持 POST、无错误捕获、无法设 timeout，别再用。
后端没权限改？试试 no-cors 模式能做什么
mode: 'no-cors' 会让请求发出，但 JavaScript 完全拿不到响应内容（response.body 只读、response.json() 报错），只能用于“发个通知”类场景，比如埋点上报、日志打点。它不会报 CORS 错误，但也不是真正的“解决”跨域。
典型误用：
- 以为设了
no-cors就能读到数据 —— 实际上连response.status都是0，response.headers是空的 - 把它当成兼容方案用在需要响应数据的业务逻辑里 —— 必然失败
真正需要数据，就必须后端配合；否则只能换架构，比如用 BFF（Backend For Frontend）层统一收口。
