一、什麼是跨域通路
說到跨域通路,必須先解釋一個名詞:同源政策。所謂同源政策就是在浏覽器端出于安全考量,向服務端發起請求必須滿足:協定相同、Host(ip)相同、端口相同的條件,否則通路将被禁止,該通路也就被稱為跨域通路。
雖然跨域通路被禁止之後,可以在一定程度上提高了應用的安全性,但也為開發帶來了一定的麻煩。比如:我們開發一個前後端分離的易用,頁面及js部署在一個主機的nginx服務中,後端接口部署在一個tomcat應用容器中,目前端向後端發起請求的時候一定是不符合同源政策的,也就無法通路。那麼我們如何解決這個問題?就是本文需要向大家說明的内容。
二、跨域通路的解決方案有哪些?
2.1.第一類方案:前端解決方案
雖然浏覽器對于不符合同源政策的通路是禁止的,但是仍然存在例外的情況,如以下資源引用的标簽不受同源政策的限制:
- html的script标簽
- html的link标簽
- html的img标簽
- html的iframe标簽:對于使用jsp、freemarker開發的項目,這是實作跨域通路最常見的方法,
除了基于HTML本身的特性實作跨域通路,我們還可以使用jsonp、window的postMessage實作跨域通路。這些都是前端實作跨域通路的方式。
2.2.第二類方案:使用代理
實際上對跨域通路的支援在服務端實作起來更加容易,最常用的方法就是通過代理的方式,如:
- nginx或haproxy代理跨域
- nodejs中間件代理跨域
其實實作代理跨域的邏輯非常簡單:就是在不同的資源服務:js資源、html資源、css資源、接口資料資源服務的前端搭建一個中間層,所有的浏覽器及用戶端通路都通過代理轉發。是以在浏覽器、用戶端看來,它們通路的都是同一個ip、同一個端口的資源,進而符合同源政策實作跨域通路。
2.3 第三類方案:CORS
跨域資源共享(CORS):通過修改Http協定header的方式,實作跨域。說的簡單點就是,通過設定HTTP的響應頭資訊,告知浏覽器哪些情況在不符合同源政策的條件下也可以跨域通路,浏覽器通過解析Http協定中的Header執行具體判斷。具體的Header如下:
CROS跨域常用header
Access-Control-Allow-Origin: 允許哪些ip或域名可以跨域通路
Access-Control-Max-Age: 表示在多少秒之内不需要重複校驗該請求的跨域通路權限
Access-Control-Allow-Methods: 表示允許跨域請求的HTTP方法,如:GET,POST,PUT,DELETE
Access-Control-Allow-Headers: 表示通路請求中允許攜帶哪些Header資訊,如:
Accept
、
Accept-Language
、
Content-Language
、
Content-Type
三、SpringBoot下實作CORS的四種方式
為大家介紹四種實作CORS的方法,兩種是全局配置,兩種是局部接口生效的配置。一般來說,SpringBoot項目采用其中一種方式實作CORS即可。
3.1.使用CorsFilter進行全局跨域配置
@Configuration
public class GlobalCorsConfig {
@Bean
public CorsFilter corsFilter() {
CorsConfiguration config = new CorsConfiguration();
//開放哪些ip、端口、域名的通路權限,星号表示開放所有域
config.addAllowedOrigin("*");
//是否允許發送Cookie資訊
config.setAllowCredentials(true);
//開放哪些Http方法,允許跨域通路
config.addAllowedMethod("GET","POST", "PUT", "DELETE");
//允許HTTP請求中的攜帶哪些Header資訊
config.addAllowedHeader("*");
//暴露哪些頭部資訊(因為跨域通路預設不能擷取全部頭部資訊)
config.addExposedHeader("*");
//添加映射路徑,“/**”表示對所有的路徑實行全局跨域通路權限的設定
UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
configSource.registerCorsConfiguration("/**", config);
return new CorsFilter(configSource);
}
}
複制
3.2. 重寫WebMvcConfigurer的addCorsMappings方法(全局跨域配置)
@Configuration
public class GlobalCorsConfig {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurer() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") //添加映射路徑,“/**”表示對所有的路徑實行全局跨域通路權限的設定
.allowedOrigins("*") //開放哪些ip、端口、域名的通路權限
.allowCredentials(true) //是否允許發送Cookie資訊
.allowedMethods("GET","POST", "PUT", "DELETE") //開放哪些Http方法,允許跨域通路
.allowedHeaders("*") //允許HTTP請求中的攜帶哪些Header資訊
.exposedHeaders("*"); //暴露哪些頭部資訊(因為跨域通路預設不能擷取全部頭部資訊)
}
};
}
}
複制
3.3.使用CrossOrigin注解(局部跨域配置)
- 将CrossOrigin注解加在Controller層的方法上,該方法定義的RequestMapping端點将支援跨域通路
- 将CrossOrigin注解加在Controller層的類定義處,整個類所有的方法對應的RequestMapping端點都将支援跨域通路
@RequestMapping("/cors")
@ResponseBody
@CrossOrigin(origins = "http://localhost:8080", maxAge = 3600)
public String cors( ){
return "cors";
}
複制
3.4 使用HttpServletResponse設定響應頭(局部跨域配置)
這種方式略顯麻煩,不建議在SpringBoot項目中使用。
@RequestMapping("/cors")
@ResponseBody
public String cors(HttpServletResponse response){
//使用HttpServletResponse定義HTTP請求頭,最原始的方法也是最通用的方法
response.addHeader("Access-Control-Allow-Origin", "http://localhost:8080");
return "cors";
}
複制
四、實作與測試
在SpringBoot項目外随便定義一個HTML,并寫代碼觸發如下的ajax代碼。(觸發過程我就不寫了,定義一個按鈕加一個監聽函數即可)。以下是跨域AJAX請求驗證的核心代碼:
$.ajax({
url: 'http://localhost:8090/cors',
type: "POST",
xhrFields: {
withCredentials: true //允許發送Cookie資訊
},
success: function (data) {
alert("跨域請求配置成功")
},
error: function (data) {
alert("跨域請求配置失敗")
}
})
複制
- 跨域請求配置成功表示:我們的跨域配置生效,ajax請求可以正确通路服務端接口。
- 跨域請求配置失敗表示:我們的跨域配置未生效,請參照檢查第三節檢查各項配置是否正确。
期待您的關注
部落客最近新寫了一本書:《手摸手教您學習SpringBoot系列-16章97節》
本文轉載注明出處(必須帶連接配接,不能隻轉文字):字母哥部落格。
喜歡 (7)or分享 (0)