SpringBoot 解決跨域請(qǐng)求的幾種姿勢(shì)！
01、背景介紹
熟悉 web 系統(tǒng)開(kāi)發(fā)的同學(xué)，對(duì)下面這樣的錯(cuò)誤應(yīng)該不會(huì)太陌生。
圖片
之所以會(huì)出現(xiàn)這個(gè)錯(cuò)誤，是因?yàn)闉g覽器出于安全的考慮，采用同源策略的控制，防止當(dāng)前站點(diǎn)惡意攻擊 web 服務(wù)器盜取數(shù)據(jù)。
同源策略，簡(jiǎn)單的說(shuō)就是當(dāng)瀏覽器訪問(wèn) web 服務(wù)器資源時(shí)，只有源相同才能正常進(jìn)行通信，即協(xié)議、域名、端口號(hào)都完全一致，否則就屬于跨域請(qǐng)求。當(dāng)發(fā)起跨域請(qǐng)求時(shí)，服務(wù)端是能收到請(qǐng)求并正常返回結(jié)果的，只是結(jié)果被瀏覽器攔截了。
像上文中，瀏覽器訪問(wèn)的站點(diǎn)是http://127.0.0.1:8848/，而站點(diǎn)內(nèi)發(fā)起的接口請(qǐng)求源是http://localhost:8080，因?yàn)椴煌?，所以?bào)跨域請(qǐng)求異常。
由此可見(jiàn)，想要實(shí)現(xiàn)接口請(qǐng)求的正常訪問(wèn)，瀏覽器的訪問(wèn)站點(diǎn)源和接口請(qǐng)求源，必須得一致。
事實(shí)上，在現(xiàn)在流行的前后端分離的開(kāi)發(fā)模式下，很難做到請(qǐng)求源高度一致，那怎么辦呢？
答案肯定是有辦法啦！
雖然瀏覽器出于安全的考慮，默認(rèn)采用同源策略控制，以便減少服務(wù)器被惡意攻擊的機(jī)會(huì)，但是開(kāi)發(fā)者可以通過(guò)CORS協(xié)議在瀏覽器內(nèi)實(shí)現(xiàn)站內(nèi)跨域請(qǐng)求訪問(wèn)。
實(shí)現(xiàn)很簡(jiǎn)單，通過(guò)在 web 服務(wù)器中增加一個(gè)特殊的Header響應(yīng)屬性來(lái)告訴瀏覽器解除跨域的限制，如果瀏覽器支持CORS并且判斷允許通過(guò)的話，此時(shí)發(fā)起的跨域請(qǐng)求就可以正常展示了。
常用的 Header 響應(yīng)屬性如下：
圖片
帶著以上的信息，我們就一起來(lái)了解一下如何在 Spring Boot 應(yīng)用中實(shí)現(xiàn)跨域訪問(wèn)。
02、解決方案
2.1、方法一：采用過(guò)濾器的方式全局配置
采用過(guò)濾器的方式來(lái)實(shí)現(xiàn)所有接口支持跨域請(qǐng)求，是一種比較通用的做法，也是 Java web 項(xiàng)目中常用的方法，實(shí)現(xiàn)過(guò)程如下！
首先，創(chuàng)建一個(gè)實(shí)現(xiàn)自Filter接口的過(guò)濾器，示例如下：
public class CrossFilter implements Filter {
/**
* 允許跨域的白名單域名
*/
private final static Set<String> ALLOW_DOMAINS = new HashSet<>();
static {
ALLOW_DOMAINS.add("http://127.0.0.1:8848");
}
@Override
public void init(FilterConfig config) throws ServletException {}
@Override
public void doFilter(ServletRequest servletRequest, ServletResponse servletResponse, FilterChain filterChain) throws IOException, ServletException {
HttpServletRequest request = (HttpServletRequest)servletRequest;
HttpServletResponse response = (HttpServletResponse)servletResponse;
// 獲取客戶(hù)端原始請(qǐng)求域
String origin = request.getHeader("Origin");
String originDomain = removeHttp(origin);
if(ALLOW_DOMAINS.contains(originDomain)){
// 在響應(yīng)對(duì)象中，添加CROS協(xié)議相關(guān)的header屬性
response.setHeader("Access-Control-Allow-Origin", origin);
response.setHeader("Access-Control-Allow-Methods", "POST,GET,OPTIONS,DELETE,HEAD,PUT,PATCH");
response.setHeader("Access-Control-Max-Age", "3600");
response.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept,Authorization,authorization");
response.setHeader("Access-Control-Allow-Credentials","true");
}
//繼續(xù)往下傳遞
filterChain.doFilter(servletRequest, servletResponse);
}
@Override
public void destroy() {}
/**
* 移除http協(xié)議頭部
* @param url
* @return
*/
public static String removeHttp(String url){
return url.replace("http://", "").replace("https://", "");
}
}接著，將其注冊(cè)到Servlet容器中，示例如下：
@Configuration
public class FilterConfig {
/**
* 添加CrossFilter過(guò)濾器
* @return
*/
@Bean
public FilterRegistrationBean crossFilterBean() {
FilterRegistrationBean registration = new FilterRegistrationBean();
registration.setName("crossFilter"); // 指定過(guò)濾器名稱(chēng)
registration.setFilter(new CrossFilter()); // 指定過(guò)濾器實(shí)現(xiàn)類(lèi)
registration.setUrlPatterns(Collections.singleton("/*"));// 指定攔截路徑
registration.setOrder(1);// 指定順序
return registration;
}
}最后，啟動(dòng)服務(wù)后，再到瀏覽器中發(fā)起跨域請(qǐng)求，看看效果如下。
圖片
圖片
從結(jié)果上看，瀏覽器成功進(jìn)行了跨域請(qǐng)求，并展示了服務(wù)器返回的結(jié)果。
2.2、方法二：通過(guò)全局配置類(lèi)實(shí)現(xiàn)跨域訪問(wèn)
在 Spring Boot 應(yīng)用，除了采用過(guò)濾器的方式實(shí)現(xiàn)跨域訪問(wèn)外，我們還可以通過(guò)全局配置類(lèi)實(shí)現(xiàn)跨域訪問(wèn)。
實(shí)現(xiàn)方法也非常簡(jiǎn)單，只需要重寫(xiě)WebMvcConfigurer接口中的addCorsMappings方法即可，示例如下：
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**")
.allowedOrigins("*")
.allowedMethods("GET", "POST", "PUT", "DELETE")
.maxAge(3600)
.allowedHeaders("Origin", "Accept", "Content-Type", "Authorization")
.allowCredentials(true);
}
}其中allowedOrigins("*")表示對(duì)所有請(qǐng)求都允許跨域訪問(wèn)。
2.3、方法三：通過(guò)CrossOrigin注解實(shí)現(xiàn)跨域訪問(wèn)
某些場(chǎng)景，如果不希望所有的接口都能跨域訪問(wèn)，只想在部分接口上放開(kāi)跨域訪問(wèn)。此時(shí)，可以通過(guò) Spring Boot 提供的@CrossOrigin注解，在對(duì)應(yīng)的方法上加上該注解，即可實(shí)現(xiàn)跨域訪問(wèn)。
示例如下：
@RestController
public class UserController {
@Autowired
private UserService userService;
@CrossOrigin
@PostMapping(value = "/queryAll")
public List<User> queryAll(){
List<User> result = userService.queryAll();
return result;
}
}如果使用在controller類(lèi)上，表示當(dāng)前類(lèi)下的所有接口方法都允許跨域訪問(wèn)。
同時(shí)，@CrossOrigin注解也支持設(shè)置更小的粒度，示例如下：
@CrossOrigin(origins = "http://domain.com", maxAge = 1800)更多的屬性行為，內(nèi)容如下：
- origins: 允許的源列表，多個(gè)源可以使用逗號(hào)分隔
- methods: 允許的 HTTP 方法列表
- allowedHeaders: 允許的請(qǐng)求頭列表，默認(rèn)情況下，允許所有請(qǐng)求頭
- allowCredentials：設(shè)置是否允許攜帶憑證
- maxAge: 預(yù)檢請(qǐng)求的緩存時(shí)間（以秒為單位）
03、小結(jié)
最后總結(jié)一下，在 Spring Boot 服務(wù)中可以通過(guò)過(guò)濾器或者配置類(lèi)實(shí)現(xiàn)全局跨域訪問(wèn)，也可以通過(guò)@CrossOrigin注解實(shí)現(xiàn)局部跨域訪問(wèn)。
跨域訪問(wèn)的配置，更適合在開(kāi)發(fā)環(huán)境中方便前后端進(jìn)行聯(lián)調(diào)對(duì)接。為了安全起見(jiàn)，在上生產(chǎn)的時(shí)候，建議將其關(guān)閉掉或者做限制。
示例代碼地址：
https://gitee.com/pzblogs/spring-boot-example-demo04、參考
1.https://cloud.tencent.com/developer/article/1655583
2.https://cloud.tencent.com/developer/article/1924258
