前后端分离架构下跨域报错是前端联调时最常见的拦路虎明明接口本地测试正常、后端控制台无异常前端控制台却疯狂报红接口请求直接失败、数据无法渲染。这类问题不涉及业务代码却极易耽误联调进度新手更是摸不清根源反复修改配置也无法解决。✅ 经典CORS报错No Access-Control-Allow-Origin header is present on the requested resource✅ 预检请求失败OPTIONS请求403/404正式接口无法调用✅ 跨域配置不生效全局配置、注解配置双双失效✅ 自定义请求头跨域失败token、Authorization等头部无法传递✅ 复杂请求跨域失效POST/PUT/DELETE请求无法正常跨域✅ 跨域与拦截器冲突配置跨域后接口依旧报错。本篇整理SpringBoot跨域8大高频报错场景从根源讲解跨域原理每类问题都搭配完整报错原文核心根因可直接复制的解决方案覆盖全局配置、局部配置、避坑优化不管是简单请求还是复杂请求照着配置就能彻底解决建议收藏联调遇到直接对照一、前置科普什么是跨域为什么会报错浏览器出于安全考虑遵循同源策略只有协议、域名、端口三者完全一致才算同源不同源之间的请求会被浏览器拦截这就是跨域。SpringBoot项目跨域报错核心原因只有一个后端未开启CORS跨域支持未返回对应的跨域响应头浏览器拦截了请求。后端接口本身正常只是浏览器的安全限制导致无需修改业务逻辑只需配置跨域规则即可解决。关键区分简单请求GET/POST无自定义请求头直接触发跨域拦截复杂请求PUT/DELETE/自定义头部会先发起OPTIONS预检请求预检不通过正式请求直接失败二、8大高频跨域报错完美解决方案场景1经典报错 - No Access-Control-Allow-Origin header1. 前端控制台报错原文Access to XMLHttpRequest at http://localhost:8080/api/user/list from origin http://localhost:8081 has been blocked by CORS policy: No Access-Control-Allow-Origin header is present on the requested resource.2. 核心原因最基础的跨域问题后端完全未配置跨域响应头中缺少跨域必备的Access-Control-Allow-Origin字段浏览器直接拦截请求。3. 解决方案全局跨域配置推荐新建配置类实现WebMvcConfigurer接口全局开启跨域适配所有接口import org.springframework.context.annotation.Configuration; import org.springframework.web.servlet.config.annotation.CorsRegistry; import org.springframework.web.servlet.config.annotation.WebMvcConfigurer; Configuration public class CorsConfig implements WebMvcConfigurer { Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) // 匹配所有接口 .allowedOriginPatterns(*) // 允许所有域名生产可指定具体域名 .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) // 允许请求方式 .allowCredentials(true) // 允许携带cookie、token等凭证 .allowedHeaders(*) // 允许所有请求头 .maxAge(3600); // 预检请求有效期单位秒 } }场景2OPTIONS预检请求403/404报错1. 典型现象PUT、DELETE、带自定义请求头的接口调用失败前端控制台显示OPTIONS请求403 Forbidden或404 Not Found。2. 核心原因复杂请求会先发起OPTIONS预检请求后端跨域配置未放行OPTIONS请求或拦截器、权限框架拦截了预检请求导致预检失败。3. 解决方案确保跨域配置中包含OPTIONS请求参考场景1配置拦截器、权限框架如Security、Sa-Token放行OPTIONS请求// 拦截器放行OPTIONS请求示例 Override public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception { // 放行预检请求 if (request.getMethod().equals(RequestMethod.OPTIONS.name())) { return true; } // 原有拦截逻辑 return true; }场景3跨域配置与SpringSecurity冲突配置失效1. 典型现象单独配置跨域正常集成SpringSecurity后跨域报错重新出现配置完全不生效。2. 核心原因SpringSecurity过滤器优先级高于跨域配置请求先被Security拦截跨域配置未生效需在Security中开启跨域支持。3. 解决方案在Security配置类中开启跨域整合跨域配置Configuration EnableWebSecurity public class SecurityConfig { Bean public SecurityFilterChain securityFilterChain(HttpSecurity http) throws Exception { http // 开启跨域复用自定义CorsConfig .cors().and() // 关闭csrf防护 .csrf().disable() // 其他权限配置 .authorizeHttpRequests(auth - auth.anyRequest().authenticated()); return http.build(); } }场景4CrossOrigin局部注解失效1. 典型现象在Controller或接口上添加CrossOrigin注解依旧报跨域错误。2. 核心原因注解属性配置错误未放行对应请求全局跨域与局部注解冲突拦截器、权限框架拦截了请求。3. 解决方案规范使用CrossOrigin注解适配所有跨域场景// 控制器类上添加适配所有接口 RestController RequestMapping(/api/user) CrossOrigin(originPatterns *, allowCredentials true, allowedHeaders *, methods {RequestMethod.GET, RequestMethod.POST, RequestMethod.PUT, RequestMethod.DELETE, RequestMethod.OPTIONS}) public class UserController { // 接口代码 } // 单个接口上添加 GetMapping(/list) CrossOrigin public Result getUserList() { return Result.success(); }场景5携带token/自定义请求头跨域失败1. 典型现象普通接口跨域正常携带token、Authorization等自定义请求头后跨域报错重现。2. 核心原因跨域配置未放行自定义请求头浏览器拦截携带自定义头部的请求。3. 解决方案修改全局跨域配置明确允许自定义请求头或直接放行所有请求头Override public void addCorsMappings(CorsRegistry registry) { registry.addMapping(/**) .allowedOriginPatterns(*) .allowedMethods(GET, POST, PUT, DELETE, OPTIONS) .allowCredentials(true) // 放行所有请求头包含自定义token .allowedHeaders(*) .exposedHeaders(Authorization, token) // 暴露自定义响应头 .maxAge(3600); }场景6allowCredentials与allowedOrigin冲突报错1. 前端控制台报错原文Access to XMLHttpRequest at http://localhost:8080/api/user/list from origin http://localhost:8081 has been blocked by CORS policy: The value of Access-Control-Allow-Origin cannot be the wildcard * when the requests credentials mode is include.2. 核心原因开启allowCredentials(true)允许携带凭证后不能使用allowedOrigins(*)通配符必须指定具体域名。3. 解决方案将allowedOrigins替换为allowedOriginPatterns即可兼容通配符与凭证携带// 错误写法 // .allowedOrigins(*) // 正确写法 .allowedOriginPatterns(*)场景7跨域配置后响应头缺失依旧报错1. 典型现象配置了跨域但响应头中依旧没有Access-Control-Allow-Origin字段浏览器依旧拦截。2. 核心原因跨域配置类未被Spring加载漏加Configuration注解项目存在多个跨域配置互相覆盖过滤器手动清空了响应头。3. 解决方案检查配置类必须添加Configuration注解删除多余跨域配置保留一套全局配置排查过滤器避免手动清除跨域响应头。场景8网关Gateway整合后跨域重复报错1. 典型现象微服务项目通过Gateway网关调用配置网关跨域后依旧报重复跨域头错误。2. 核心原因网关和微服务都配置了跨域导致响应头重复浏览器识别异常。3. 解决方案微服务项目只在网关层配置跨域删除所有微服务自身的跨域配置避免重复配置。三、跨域万能排查步骤查看前端报错定位是Origin缺失、预检失败还是凭证冲突检查全局跨域配置确保注解、属性配置无误排查拦截器、权限框架放行OPTIONS预检请求微服务项目只保留网关一层跨域配置查看接口响应头确认跨域字段是否正常返回。四、生产环境跨域避坑指南生产环境禁止使用allowedOriginPatterns(*)指定具体前端域名提升安全性优先使用全局跨域配置避免局部注解零散管理集成权限框架后必须同步适配跨域配置避免过滤器优先级冲突复杂请求务必放行OPTIONS预检请求否则正式请求无法发起微服务架构只在网关配置跨域微服务自身禁止配置跨域避免同时使用多种跨域配置方式防止互相冲突。五、总结SpringBoot跨域报错看似问题繁杂实则都是配置缺失、配置冲突、权限拦截三大类问题。只要理清跨域原理统一使用全局跨域配置适配权限框架与微服务架构就能彻底解决所有跨域问题。前后端联调遇到跨域不用慌对照本文对应场景复制对应配置一分钟即可解决再也不用为跨域问题耽误开发进度。如果这篇文章帮到你了记得点赞收藏评论区说说你踩过的跨域坑一起交流避坑