在前后端分离项目中,跨域(CORS) 是前端同学联调时最常遇到的问题,没有之一。
浏览器同源策略限制、请求被拦截、控制台报 CORS error,都是典型的跨域现象。
今天我们来讲讲什么是跨域、为什么会跨域、SpringBoot 最全跨域解决方案。
一、什么是跨域?为什么会出现?
1. 同源策略(浏览器安全限制)
浏览器只允许:
协议 + 域名 + 端口 完全一致,才能正常请求。
只要有一项不一样,就会触发跨域拦截:
-
http://localhost:8080→
http://localhost:9090(端口不同 → 跨域) -
http://localhost:8080→
http://127.0.0.1:8080(域名不同 → 跨域) -
http://localhost:8080→
https://localhost:8080(协议不同 → 跨域)
2. 跨域报错特征
-
控制台红色错误:
Access to XMLHttpRequest at... blocked by CORS policy -
前端请求发送失败,后端收不到请求(OPTIONS 预检请求被拦截)
二、SpringBoot 跨域 4 种解决方案
方案 1:注解方式(最简单,单个接口/Controller)
在 Controller 类上 加一个注解:
go
1@RestController
2@RequestMapping("/user")
3@CrossOrigin// 允许所有跨域
4publicclassUserController{
5}
支持精细化配置:
go
1@CrossOrigin(
2 origins ="http://localhost:8081",// 只允许这个前端地址
3 maxAge =3600
4)
优点 :简单
缺点:只能单个Controller生效,不适合大型项目
方案 2:全局配置类
企业最常用,一次配置,全局所有接口生效。
创建 CorsConfig.java:
go
1importorg.springframework.context.annotation.Bean;
2importorg.springframework.context.annotation.Configuration;
3importorg.springframework.web.cors.CorsConfiguration;
4importorg.springframework.web.cors.UrlBasedCorsConfigurationSource;
5importorg.springframework.web.filter.CorsFilter;
6
7/**
8* 全局跨域配置
9*/
10@Configuration
11publicclassCorsConfig{
12
13@Bean
14publicCorsFiltercorsFilter(){
15CorsConfiguration config =newCorsConfiguration();
16// 1. 允许所有域名跨域(生产可指定具体地址)
17 config.addAllowedOriginPattern("*");
18// 2. 允许所有请求头
19 config.addAllowedHeader("*");
20// 3. 允许所有请求方法
21 config.addAllowedMethod("*");
22// 4. 允许携带Cookie(Token、Session)
23 config.setAllowCredentials(true);
24// 5. 预检有效期
25 config.setMaxAge(3600L);
26
27UrlBasedCorsConfigurationSource source =newUrlBasedCorsConfigurationSource();
28 source.registerCorsConfiguration("/**", config);
29returnnewCorsFilter(source);
30}
31}
✅ 复制即用,全局所有接口立刻解决跨域
方案 3:Spring Security 中的跨域配置
如果项目集成了 Spring Security / Sa-Token / Shiro,必须在安全框架中开启跨域:
go
1@Bean
2publicSecurityFilterChainsecurityFilterChain(HttpSecurity http)throwsException{
3 http
4.cors()// 开启跨域
5.and()
6.csrf().disable();
7return http.build();
8}
重点 :
安全框架拦截优先级最高,只配置方案2会失效!
方案 4:网关统一处理(微服务项目)
Spring Cloud / Spring Gateway 项目,必须在网关配置跨域,不要在微服务里配置。
application.yml:
go
1spring:
2 cloud:
3 gateway:
4 globalcors:
5 cors-configurations:
6 '[/**]':
7allowedOriginPatterns:"*"
8allowedHeaders:"*"
9allowedMethods:"*"
10allowCredentials:true
三、为什么配置了还跨域?
1. 配置不生效的常见原因
-
Spring Security / 权限框架拦截
→ 必须开启
.cors() -
跨域配置类未被扫描
→ 检查包路径、
@Configuration -
重复配置跨域
→ 多个跨域配置冲突
-
前端携带了自定义请求头
→ 必须允许所有头
-
使用了 @CrossOrigin + 全局配置冲突
2. 解决方案
直接使用 方案2(全局CorsFilter) ,
并且 权限框架中开启 cors ,
几乎 100% 解决所有跨域问题。
四、生产环境跨域建议
-
不要用 allowedOrigins("*")
,要指定前端域名:
go
1config.addAllowedOrigin("https://www.xxx.com");
-
**允许携带Cookie时,不能用 * **
-
预检请求缓存时间设长一点
(maxAge)
-
微服务只在网关配置跨域
五、一句话总结
-
跨域是浏览器安全限制,后端必须开启 CORS
-
单体项目用 全局 CorsFilter(方案2)
-
安全框架项目必须 .cors() 开启
-
微服务在 网关统一配置
-
配置一次,永久告别 CORS 错误