该错误源于服务端未正确配置cors响应头，需从前端请求行为、服务端配置及预检（options）处理三方面排查；跨域判定依据是协议、域名、端口三者是否完全一致；服务端必须返回合法的access-control-allow-origin等头，且预检请求须被正确响应。
这个错误说明浏览器因安全策略阻止了跨域请求，根本原因是服务端响应头没正确设置 Access-Control-Allow-Origin。排查需从前端请求行为、服务端配置、预检（OPTIONS）处理三方面入手，不能只盯着前端加 header。
确认是否真为跨域请求
不是所有带域名的请求都跨域。判断依据是“协议 + 域名 + 端口”三者是否完全一致：
-
http://localhost:3000→http://localhost:8080：端口不同，跨域 -
https://api.example.com→http://api.example.com：协议不同，跨域 -
http://a.example.com→http://b.example.com：子域不同，跨域 - 同页面内用
fetch('/api/data')请求相对路径：不跨域（走当前源）
检查服务端是否返回了正确的 CORS 响应头
打开浏览器开发者工具的 Network 面板，找到对应请求，点开查看 Response Headers：
- 必须包含
Access-Control-Allow-Origin，且值要匹配请求来源（如http://localhost:3000），或设为*（注意：*不允许携带凭据） - 若请求带 credentials（如
credentials: 'include'），则Access-Control-Allow-Origin不能为*，必须明确指定源 - 还需检查是否返回了
Access-Control-Allow-Credentials: true（当需要 Cookie 或 Authorization 头时）
留意预检请求（OPTIONS）是否被忽略或失败
当请求满足以下任一条件时，浏览器会先发一个 OPTIONS 预检请求：
- 使用了非简单方法（如
PUT、DELETE） - 设置了自定义 header（如
Authorization: Bearer xxx） - Content-Type 为
application/json等非简单类型
如果服务端没正确处理 OPTIONS 请求（比如没返回 200 + CORS 头），就会报错。常见问题包括：
- 后端路由未配置对
OPTIONS方法的响应 - 中间件（如身份验证）拦截了 OPTIONS 请求并拒绝响应
- 反向代理（如 Nginx）未透传或覆盖了 CORS 头
避免前端“伪修复”陷阱
以下操作无法解决该错误，反而掩盖问题本质：
- 在 JS 中手动设置
headers: { 'Access-Control-Allow-Origin': '*' }—— 浏览器禁止前端设置该 header - 用代理（如 Webpack DevServer 的
proxy）仅解决开发环境问题，上线仍需服务端配置 - 禁用浏览器安全策略（如 Chrome 加
--disable-web-security）—— 仅用于调试，不可用于验证真实方案
核心原则：CORS 是服务端责任。前端能做的只有规范发起请求（如避免不必要的 credentials）、配合调试；最终必须由后端确保每个响应（含预检）都携带合法的 CORS 头。
Java免费学习笔记：立即使用
解锁 Java 大师之旅：从入门到精通的终极指南
