當前位置:
首頁 > 知識 > 遇上瀏覽器跨域問題怎麼辦?

遇上瀏覽器跨域問題怎麼辦?

遇上瀏覽器跨域問題怎麼辦?

打開今日頭條,查看更多圖片

出於安全原因,瀏覽器禁止 Ajax 調用駐留在當前原點之外的資源。例如,當你在一個標籤中檢查你的銀行賬戶時,你可以在另一個選項卡上擁有 EVILL 網站。來自 EVILL 的腳本不能夠對你的銀行 API 做出 Ajax 請求(從你的帳戶中取出錢!)使用您的憑據。

跨源資源共享(CORS)是由大多數瀏覽器實現的 W3C 規範,允許你靈活地指定什麼樣的跨域請求被授權,而不是使用一些不太安全和不太強大的策略,如 IFRAME 或 JSONP。


跨域(CORS)支持

Spring Framework 4.2 GA 為 CORS 提供了第一類支持,使您比通常的基於過濾器的解決方案更容易和更強大地配置它。所以 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin


使用方法

1. controller 配置 CORS

1.1 controller 方法的 CORS 配置,您可以向 @RequestMapping 註解處理程序方法添加一個 @CrossOrigin 註解,以便啟用 CORS(默認情況下,@CrossOrigin 允許在 @RequestMapping 註解中指定的所有源和 HTTP 方法):

@RestController
@RequestMapping("/account")
public class AccountController {
@CrossOrigin
@GetMapping("/{id}")
public Account retrieve(@PathVariable Long id) {
// ...
}
@DeleteMapping("/{id}")
public void remove(@PathVariable Long id) {
// ...
}
}

其中 @CrossOrigin 中的 2 個參數:

  • origins : 允許可訪問的域列表
  • maxAge:準備響應前的緩存持續的最大時間(以秒為單位)。

1.2 為整個 controller 啟用 @CrossOrigin

@CrossOrigin(origins = "http://domain2.com", maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {
@GetMapping("/{id}")
public Account retrieve(@PathVariable Long id) {
// ...
}
@DeleteMapping("/{id}")
public void remove(@PathVariable Long id) {
// ...
}
}

在這個例子中,對於 retrieve() 和 remove() 處理方法都啟用了跨域支持,還可以看到如何使用 @CrossOrigin 屬性定製 CORS 配置。

1.3 同時使用 controller 和方法級別的 CORS 配置,Spring 將合併兩個注釋屬性以創建合併的 CORS 配置。

@CrossOrigin(maxAge = 3600)
@RestController
@RequestMapping("/account")
public class AccountController {
@CrossOrigin(origins = "http://domain2.com")
@GetMapping("/{id}")
public Account retrieve(@PathVariable Long id) {
// ...
}
@DeleteMapping("/{id}")
public void remove(@PathVariable Long id) {
// ...
}
}

1.4 如果您正在使用 Spring Security,請確保在 Spring 安全級別啟用 CORS,並允許它利用 Spring MVC 級別定義的配置。

@EnableWebSecurity
public class WebSecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.cors().and()...
}
}

2. 全局 CORS 配置

除了細粒度、基於注釋的配置之外,您還可能需要定義一些全局 CORS 配置。這類似於使用篩選器,但可以聲明為 Spring MVC 並結合細粒度 @CrossOrigin 配置。默認情況下,所有 origins and GET, HEAD and POST methods 是允許的。

JavaConfig

使整個應用程序的 CORS 簡化為:

@Configuration
@EnableWebMvc
public class WebConfig extends WebMvcConfigurerAdapter {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
}

如果您正在使用 Spring Boot,建議將 WebMvcConfigurer bean 聲明如下:

@Configuration
public class MyConfiguration {
@Bean
public WebMvcConfigurer corsConfigurer() {
return new WebMvcConfigurerAdapter() {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**");
}
};
}
}

您可以輕鬆地更改任何屬性,以及僅將此 CORS 配置應用到特定的路徑模式:

@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/api/**")
.allowedOrigins("http://domain2.com")
.allowedMethods("PUT", "DELETE")
.allowedHeaders("header1", "header2", "header3")
.exposedHeaders("header1", "header2")
.allowCredentials(false).maxAge(3600);
}

如果您正在使用 Spring Security,請確保在 Spring 安全級別啟用 CORS,並允許它利用 Spring MVC 級別定義的配置。

3. XML命名空間

還可以將 CORS 與 MVC XML 命名空間配置。

a) 如果整個項目所有方法都可以訪問,則可以這樣配置;此最小 XML 配置使 CORS 在 /** 路徑模式具有與 JavaConfig 相同的預設屬性:

<mvc:cors>
<mvc:mapping path="/**" />
</mvc:cors>

其中 * 表示匹配到下一層;** 表示後面不管有多少層,都能匹配。

如:

<mvc:cors>
<mvc:mapping path="/api/*"/>
</mvc:cors>

這個可以匹配到的路徑有:


/api/aaa

/api/bbbb

不能匹配的:


/api/aaa/bbb

因為 * 只能匹配到下一層路徑,如果想後面不管多少層都可以匹配,配置如下:

<mvc:cors>
<mvc:mapping path="/api/**"/>
</mvc:cors>

註:其實就是一個 () 變成兩個 (*)

b) 也可以用定製屬性聲明幾個 CORS 映射:

<mvc:cors>
<mvc:mapping path="/api/**"
allowed-origins="http://domain1.com, http://domain2.com"
allowed-methods="GET, PUT"
allowed-headers="header1, header2, header3"
exposed-headers="header1, header2" allow-credentials="false"
max-age="123" />
<mvc:mapping path="/resources/**"
allowed-origins="http://domain1.com" />
</mvc:cors>

請求路徑有 /api/,方法示例如下:

@RequestMapping("/api/crossDomain")
@ResponseBody
public String crossDomain(HttpServletRequest req, HttpServletResponse res, String name){
……
……
}

c) 如果使用 Spring Security,不要忘記在 Spring 安全級別啟用 CORS:

<http>
<!-- Default to Spring MVC"s CORS configuration -->
<cors />
...
</http>

4. How does it work?

CORS 請求(包括預選的帶有選項方法)被自動發送到註冊的各種 HandlerMapping 。它們處理 CORS 準備請求並攔截 CORS 簡單和實際請求,這得益於 CorsProcessor 實現(默認情況下默認 DefaultCorsProcessor 處理器),以便添加相關的 CORS 響應頭(如 Access-Control-Allow-Origin)。 CorsConfiguration 允許您指定 CORS 請求應該如何處理:允許 origins, headers, methods 等。

a) AbstractHandlerMapping 類的 setCorsConfiguration() 方法允許指定一個映射,其中有幾個 CorsConfiguration 映射在路徑模式上,比如 /api/**。

b) 子類可以通過重寫 AbstractHandlerMapping 類的 getCorsConfiguration(Object, HttpServletRequest) 方法來提供自己的 CorsConfiguration。

c) 處理程序可以實現 CorsConfigurationSource 介面(如 ResourceHttpRequestHandler),以便為每個請求提供一個 CorsConfiguration。

5. 基於過濾器的 CORS 支持

作為上述其他方法的替代,Spring 框架還提供了 CorsFilter。在這種情況下,不用使用 @CrossOrigin 或 WebMvcConfigurer#addCorsMappings(CorsRegistry),例如,可以在 Spring Boot 應用程序中聲明如下的過濾器:

@Configuration
public class MyConfiguration {
@Bean
public FilterRegistrationBean corsFilter() {
UrlBasedCorsConfigurationSource source = new UrlBasedCorsConfigurationSource();
CorsConfiguration config = new CorsConfiguration();
config.setAllowCredentials(true);
config.addAllowedOrigin("http://domain1.com");
config.addAllowedHeader("*");
config.addAllowedMethod("*");
source.registerCorsConfiguration("/**", config);
FilterRegistrationBean bean = new FilterRegistrationBean(new CorsFilter(source));
bean.setOrder(0);
return bean;
}
}

spring 註解 @CrossOrigin 不起作用的原因

1. 是 springMVC 的版本要在 4.2 或以上版本才支持 @CrossOrigin

2. 非 @CrossOrigin 沒有解決跨域請求問題,而是不正確的請求導致無法得到預期的響應,導致瀏覽器端提示跨域問題。

3. 在 Controller 註解上方添加 @CrossOrigin 註解後,仍然出現跨域問題,解決方案之一就是:

在 @RequestMapping 註解中沒有指定 Get、Post 方式,具體指定後,問題解決。

類似代碼如下:

@CrossOrigin
@RestController
public class person{
@RequestMapping(method = RequestMethod.GET)
public String add() {
// 若干代碼
}
}

參考文章:

1. 官方文檔 https://spring.io/blog/2015/06/08/cors-support-in-spring-framework

2. http://fanshuyao.iteye.com/blog/2384189

3. https://blog.csdn.net/taiyangnimeide/article/details/78305131

4. https://blog.csdn.net/snowin1994/article/details/53035433


作者:淼淼之森 ,一個碼在第一線的JAVA開發者 。

聲明:本文為作者投稿,版權歸對方所有。

喜歡這篇文章嗎?立刻分享出去讓更多人知道吧!

本站內容充實豐富,博大精深,小編精選每日熱門資訊,隨時更新,點擊「搶先收到最新資訊」瀏覽吧!


請您繼續閱讀更多來自 CSDN 的精彩文章:

馬雲自評英語水平;蘋果研發基帶晶元|極客頭條
如何設計可自學習的五子棋 AI?

TAG:CSDN |