Spring Security如何解决跨域

发表于 2023-04-16 更新于 2025-07-31 分类于 Spring Security

1. 什么是跨域

我们平常所说的跨域实际上都是在讨论浏览器行为，包括各种WebView容器等(其中，以XmlHttpRequest的使用为主)。由于JavaScript运行在浏览器智商，所以Ajax的跨域成为”痛点”。

实际上，不仅不同站点间的访问存在跨域问题，同站点间的访问可能也会遇到跨域问题，只要请求的URL与所在页面的URL首部不同即产生跨域，例如：

在http://a.baidu.com下访问https://a.baidu.com资源会形成协议跨域。
在a.baidu.com下访问b.baidu.com资源会形成主机跨域。
在a.baidu.com:80下访问a.baidu.com:8080资源会形成端口跨域。

URL首部指的是

window.location.protocol + window.location.host

从协议部分开始到端口部分结束，只要与请求URL不同即被认为跨域，域名与域名对应的IP也不能幸免。

2. 实现跨域之JSONP

由于浏览器允许一些带有src属性的标签跨域，常见的有iframe、script、img等，所以JSONP利用script标签可以实习跨域。

实现思路

前端通过script标签请求，并在callback中指定返回的包装实体名称为jsonp(可以自定义)

1	<script src="http://aaa.com/getusers?callback=jsonp"></script>

后端将返回结果包装成所需数据格式

jsonp({
    "error":200,
    "message":"请求成功",
    "data":[{
        "username":"张三",
        "age":20
    }]
})

总结：JSONP实现起来很简单，但是只支持GET请求跨域，存在较大的局限性

3. 实现跨域之CORS

CORS（Cross-Origin Resource Sharing）的规范中有一组新增的HTTP首部字段，允许服务器声明其提供的资源允许哪些站点跨域使用。

注意：CORS不支持IE8以下版本的浏览器。

大多数浏览器中即便是跨域请求，请求依然是会正常发送到服务端，服务端接收并处理，只是返回到浏览器的信息被浏览器拦截屏蔽了。这样会对服务器造成不必要的资源浪费。

在CORS的规范中则避免了这个问题：

浏览器在请求时会先发一个请求方法为OPTIONS的预检请求，用于确认是否允许跨域，只有服务端允许，才会发出实际请求。
预检请求允许服务端通知浏览器跨域携带身份凭证（如cookie）

CORS新增的HTTP首部字段由服务器控制，下面介绍几个常用首部字段：

Access-Control-Allow-Origin
- 设置允许哪些站点跨域请求，使用URL首部匹配原则。
- 设置为*表示允许所有网站请求
注意：
- 当需要浏览器请求携带凭证的时候，不允许设置为*
- 设置了具体站点信息，Vary需要携带Origin属性，因为服务器对不同的域会返回不同的内容：
```
Access-Control-Allow-Origin: http://aaa.com
Vary: Accept-Encoding,Origin
```
Access-Control-Allow-Methods
- 仅在预检请求的响应中指定有效
- 表明服务器允许请求的HTTP方法
- 多个用逗号隔开
Access-Control-Allow-Headers
- 仅在预检请求的响应中指定有效
- 表明服务器允许携带的首部字段
- 多个用逗号隔开
Access-Control-Max-Age
- 指明本次预检请求的有效期
- 有效期内无需再次发起请求
Access-Control-Allow-Credentials
- 为true时，通知浏览器接下来的正式请求带上用户凭证信息（cookie等），服务器也可以使用Set-Cookie向用户浏览器写入新的cookie。
- 此时Access-Control-Allow-Origin不能设置为*

在使用CORS时，通常有以下两种访问控制场景

1. 简单请求

在CORS中，并非所有的跨域访问你都会触发预检请求。例如如下请求:

不携带自定义请求头信息的GET请求、HEAD请求
Content-Type为application/x-www-form-urlencoded、multipart/form-data或 text/plain的POST请求

请求时，会在请求头中自动添加一个Origin属性，值为当前页面URL首部。服务端接收到请求，返回信息。如果返回信息中存在跨域访问控制属性，浏览器会根据这些属性值判断是否被允许，如果允许，则跨域成功。

所以只需要后端在返回的响应头中添加Access-Control-Allow-Origin 字段并填入允许跨域访问的站点即可。

2.预检请求

预检请求不同于简单请求，它会发送一个OPTIONS请求到目标站点，以查明该请求是否安全，防止请求对目标站点的数据造成破坏。

以下请求方式会被当成预检请求类型处理:

请求以GET、HEAD、POST以外的方法发起
使用POST方法，但请求数据为application/x-www-form-urlencoded, multipart/form-data和text/plain以外的数据类型
使用了自定义请求头的请求方式

4. 启用Spring Security的CORS支持

Spring Security对CORS提供了非常好的支持，只需在配置器中启用CORS支持，并编写一个CORS配置源即可。

@Configuration
public class SecurityConfig extends WebSecurityConfigurerAdapter {
    @Override
    protected void configure(HttpSecurity http) throws Exception {
        http
                .authorizeRequests()
                .anyRequest().authenticated()
                .and()
                .formLogin()
                .permitAll()
                .and()
                .httpBasic()
                .and()
                .cors()
                .configurationSource(corsConfigurationSource())
                .and()
                .csrf()
                .disable();
    }
    
    @Bean
    CorsConfigurationSource corsConfigurationSource() {
        UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
        CorsConfiguration configuration = new CorsConfiguration();
        configuration.setAllowCredentials(true);
        configuration.setAllowedOrigins(Arrays.asList("*"));
        configuration.setAllowedMethods(Arrays.asList("*"));
        configuration.setAllowedHeaders(Arrays.asList("*"));
        configuration.setMaxAge(Duration.ofHours(1));
        source.registerCorsConfiguration("/**",configuration);
        return source;
    }
}