CORS 是浏览器强制实施的安全机制，非 JS 问题；跨域请求需服务端配置 Access-Control-Allow-Origin 等响应头，否则请求被拦截；预检请求（OPTIONS）在非简单请求时触发，需服务端正确响应；前端仅能通过代理或 credentials 配合服务端实现合规跨域。
浏览器会直接拦截跨域请求，不是 JavaScript “解决”了 CORS，而是你得按浏览器的规则来发请求、配服务端——否则连请求都发不出去。
为什么 fetch 或 XMLHttpRequest 会报 CORS 错误
这不是 JS 的 bug，是浏览器的安全机制：当协议、域名、端口任一不同，就视为跨域；此时若响应头不含 Access-Control-Allow-Origin，浏览器就拒绝把响应内容交给 JS。
常见错误现象：
- 控制台报错
Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present - Network 面板里请求状态显示
(failed) net::ERR_FAILED或preflight is invalid -
fetch()抛出 TypeError，但catch捕不到（因为请求根本没完成）
哪些请求会触发预检（OPTIONS）
只要满足以下任一条件，浏览器会在发主请求前自动发一个 OPTIONS 预检请求：
立即学习“Java免费学习笔记（深入）”；
- 使用了非简单方法（如
PUT、DELETE、PATCH） - 设置了自定义请求头（如
Authorization、X-Request-ID） - Content-Type 不是
application/x-www-form-urlencoded、multipart/form-data或text/plain
服务端必须正确响应这个 OPTIONS 请求，返回 204 或 200，且带上 Access-Control-Allow-Methods、Access-Control-Allow-Headers 等头，否则预检失败，主请求不会发出。
前端能做的有限操作：mode 和 credentials
JS 侧唯一可控的“绕过”方式，是告诉浏览器：“这次请求不需要 CORS 检查”——但这只适用于同源或已配好代理的场景：
- 开发时用
mode: 'no-cors'？不行。它会让响应变成opaque类型，JS 读不到任何数据，只适合发埋点日志这类单向请求 - 需要带 Cookie？必须同时设
credentials: 'include'，且服务端响应头必须明确写Access-Control-Allow-Credentials: true（此时Access-Control-Allow-Origin不能为*） - 真正有效的做法是：开发期用本地代理（如 vite.config.ts 中的
server.proxy），把/api代理到后端地址，让请求看起来是同源的
示例（Vite 代理配置）：
server: {
proxy: {
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
rewrite: (path) => path.replace(/^\/api/, '')
}
}
}
CORS 的本质是服务端责任
前端改 headers、加 mode、换 fetch 写法，都无法让浏览器放行一个没配好的跨域响应。最常被忽略的一点是：CORS 头必须由后端在响应中设置，且要覆盖所有必要路径（比如静态资源、健康检查接口也得有，否则预检可能卡在 /health 上）。
如果你没有后端权限，那就只能走代理；如果有的话，别只在主接口加头，检查 OPTIONS 路由是否被中间件拦截、是否遗漏了通配符或凭证支持。
