原創(chuàng)：千鋒一一哥
前言
上一章節(jié)中，一一哥 給各位講解了同源策略和跨域問題，以及跨域問題的解決方案，在本篇文章中，我會(huì)帶大家進(jìn)行代碼實(shí)現(xiàn)，看看在Spring Security環(huán)境中如何解決跨域問題。
一. 啟用Spring Security 的CORS支持
1. 創(chuàng)建web接口
我先在SpringBoot環(huán)境中，創(chuàng)建一個(gè)端口號(hào)為8080的web項(xiàng)目，注意這個(gè)web項(xiàng)目沒有引入Spring Security的依賴包。然后在其中創(chuàng)建一個(gè)IndexController，定義兩個(gè)測試接口以便被ajax進(jìn)行跨域訪問。8080項(xiàng)目的代碼結(jié)構(gòu)：
@RestController
public class IndexController {
@GetMapping("/hello")
public String hello() {
return "get hello";
}
@PostMapping("/hello")
public String hello2() {
return "post hello";
}
}
請(qǐng)參考如下代碼結(jié)構(gòu)進(jìn)行項(xiàng)目創(chuàng)建。
2. 執(zhí)行ajax請(qǐng)求
我們接下來再創(chuàng)建另一個(gè)端口號(hào)為8082的web項(xiàng)目，注意這個(gè)web項(xiàng)目也沒有引入Spring Security的依賴包。接著在這里定義一個(gè)index.html頁面，利用ajax跨域訪問8080項(xiàng)目中的web接口。
8082項(xiàng)目的代碼結(jié)構(gòu)：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Index</title>
<script type="text/javascript" src="jquery-2.1.0.js"></script>
</head>
<body>
<div id="app"></div>
<input type="button" onclick="btnClick()" value="get請(qǐng)求">
<input type="button" onclick="btnClick2()" value="post請(qǐng)求">
<script>
function btnClick() {
$.get('http://localhost:8080/hello', function (msg) {
$("#app").html(msg);
});
}
function btnClick2() {
$.post('http://localhost:8080/hello', function (msg) {
$("#app").html(msg);
});
}
</script>
</body>
</html>
請(qǐng)參考如下代碼結(jié)構(gòu)進(jìn)行項(xiàng)目創(chuàng)建。
3. 發(fā)起跨域請(qǐng)求
我們?cè)L問8082項(xiàng)目中的index.html頁面，然后分別執(zhí)行g(shù)et與post請(qǐng)求，這時(shí)候就可以在瀏覽器的控制臺(tái)上看到產(chǎn)生了CORS跨域問題，出現(xiàn)了CORS error狀態(tài)，在請(qǐng)求頭中出現(xiàn)了Referer Policy: strict-origin-when-cross-origin。
4. 解決跨域問題
既然現(xiàn)在產(chǎn)生了跨域問題，那么該怎么解決呢?其實(shí)我們可以采用如下兩種方式之一來解決跨域問題。
方式1：在接口方法上利用@CrossOrigin注解解決跨域問題
@RestController
public class IndexController {
@CrossOrigin(value = "http://localhost:8082")
@GetMapping("/hello")
public String hello() {
return "get hello";
}
@CrossOrigin(value = "http://localhost:8082")
@PostMapping("/hello")
public String hello2() {
return "post hello";
}
}
方式2：通過實(shí)現(xiàn)WebMvcConfigurer接口來解決跨域問題
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("http://localhost:8082")
.allowedMethods("*")
.allowedHeaders("*");
}
}
當(dāng)進(jìn)行了跨域設(shè)置之后，我們?cè)俅芜M(jìn)行跨域請(qǐng)求，就可以看到請(qǐng)求成功了。
二. Spring Security環(huán)境下的跨域問題解決
1. 引入Spring Security依賴
通過上面的配置，我們已經(jīng)解決了Ajax的跨域請(qǐng)求問題，但是這個(gè)案例中也有潛在的威脅存在，常見的就是 CSRF(Cross-site request forgery) 跨站請(qǐng)求偽造?？缯菊?qǐng)求偽造也被稱為 one-click attack 或者 session riding，通?？s寫為 CSRF 或者 XSRF，是一種挾制用戶在當(dāng)前已登錄的 Web 應(yīng)用程序上執(zhí)行非本意的操作的攻擊方法。
所以為了提高網(wǎng)站的安全性，我在上面Spring Boot項(xiàng)目的基礎(chǔ)之上，添加Spring Security的依賴包，但是暫時(shí)不進(jìn)行任何別的操作。
<dependencies>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-web</artifactId>
</dependency>
<dependency>
<groupId>org.springframework.boot</groupId>
<artifactId>spring-boot-starter-security</artifactId>
</dependency>
</dependencies>
2. 重啟8080項(xiàng)目進(jìn)行測試
接著我就重啟8080這個(gè)Spring Boot項(xiàng)目，然后在8082項(xiàng)目中再次進(jìn)行跨域請(qǐng)求，我們會(huì)發(fā)現(xiàn)在引入Spring Security后，再次產(chǎn)生了跨域問題。
3. 解決Spring Security環(huán)境下跨域問題的3種方案
通過實(shí)驗(yàn)可知，如果使用了 Spring Security，上面的跨域配置會(huì)失效，因?yàn)檎?qǐng)求會(huì)被 Spring Security 攔截。那么在Spring Security環(huán)境中，如何解決跨域問題呢?這里我們有3種方式可以開啟 Spring Security 對(duì)跨域的支持。
3.1 方式一：開啟cors方法
我們?cè)谏厦娴陌咐?，編寫一個(gè)SecurityConfig配置類，在configure方法中，利用cors() 開啟Spring Security 對(duì) CORS 的支持：
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.anyRequest()
.permitAll()
.and()
.formLogin()
.permitAll()
.and()
.httpBasic()
.and()
//支持跨域訪問
.cors()
.and()
.csrf()
.disable();
}
}
3.2 方式二：進(jìn)行全局配置
第二種方式是去除上面的跨域配置，直接在 Spring Security 中做全局配置，如下:
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.anyRequest()
.permitAll()
.and()
.formLogin()
.permitAll()
.and()
.httpBasic()
.and()
//支持跨域訪問
.cors()
.configurationSource(corsConfigurationSource())
.and()
.csrf()
.disable();
}
@Bean
public CorsConfigurationSource corsConfigurationSource() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration configuration = new CorsConfiguration();
configuration.setAllowCredentials(true);
configuration.setAllowedOrigins(Collections.singletonList("*"));
configuration.setAllowedMethods(Collections.singletonList("*"));
configuration.setAllowedHeaders(Collections.singletonList("*"));
configuration.setMaxAge(Duration.ofHours(1));
source.registerCorsConfiguration("/**", configuration);
return source;
}
}
以上2個(gè)方法，都可以實(shí)現(xiàn)在Spring Security環(huán)境下的跨域訪問。
3.3 方式三：支持OAuth2的跨域訪問
我們開發(fā)時(shí)，還有一種情況就是支持 OAuth2 相關(guān)接口的跨域，比如用戶要訪問 OAuth2 中的 /oauth/token 等接口。我們可以配置一個(gè)全局的 CorsFilter 跨域過濾器類，核心代碼如下：
/**
* 跨域配置方式3：定義全局跨域過濾器
**/
@Configuration
public class GlobalCorsConfiguration {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration corsConfiguration = new CorsConfiguration();
corsConfiguration.setAllowCredentials(true);
corsConfiguration.addAllowedOrigin("*");
corsConfiguration.addAllowedHeader("*");
corsConfiguration.addAllowedMethod("*");
UrlBasedCorsConfigurationSource urlBasedCorsConfigurationSource = new UrlBasedCorsConfigurationSource();
urlBasedCorsConfigurationSource.registerCorsConfiguration("/**", corsConfiguration);
return new CorsFilter(urlBasedCorsConfigurationSource);
}
}
@EnableWebSecurity
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
//跨域方式3:
http.requestMatchers()
.antMatchers(HttpMethod.OPTIONS, "/oauth/**")
.and()
.csrf()
.disable()
.formLogin()
.and()
.cors();
}
}
該方式也可以實(shí)現(xiàn)Spring Security中的跨域訪問。
4. 代碼結(jié)構(gòu)
以下是本案例的代碼結(jié)構(gòu)，可以參考下圖進(jìn)行項(xiàng)目創(chuàng)建：
至此，我就帶各位解決了Spring Security環(huán)境中的跨域問題，你學(xué)會(huì)了嗎?
關(guān)注WX公眾號(hào)【Java架構(gòu)棧】，跟著千鋒一起學(xué)Java
京公網(wǎng)安備 11010802030320號(hào)