跨域資源共享CORS（Cross-origin Resource Sharing），是W3C的一個(gè)標(biāo)準(zhǔn)，允許瀏覽器向跨源的服務(wù)器發(fā)起XMLHttpRequest請求，克服ajax請求只能同源使用的限制。關(guān)于CORS的詳細(xì)解讀，可參考阮一峰大神的博客：跨域資源共享CORS詳解。本文為通過一個(gè)小demo對該博客中分析內(nèi)容的一些驗(yàn)證。

1.springboot+vue項(xiàng)目的構(gòu)建和啟動

細(xì)節(jié)不在此贅述，任何簡單的springboot項(xiàng)目就可以，而前端vue項(xiàng)目只需用axios發(fā)ajax請求即可。

我的demo里填寫用戶名和密碼，然后點(diǎn)擊登錄按鈕向后臺發(fā)起登錄請求，js代碼如下：

methods:{
     login:function() {
      //var userParams = this.$qs.stringify(this.User);
       /* var userParams = JSON.stringify(this.User);*/
       this.$axios.post("http://localhost:8080/login",this.User).then(res=>{
       alert(res.data);
      });
     }
   }

后臺控制器部分，對登錄請求的處理：

/*CORS設(shè)置方法1：@CrossOrigin(origins = "http://localhost:8081", maxAge = 3600)*/
  @RequestMapping(value="/login",method = RequestMethod.POST, produces = "application/json;charset=UTF-8" )
  @ResponseBody
  public String userlogin(@RequestBody JSONObject user) {
		/*String name=request.getParameter("name");
		String password=request.getParameter("password");*/
		System.out.println("name: " + user.get("name"));
		System.out.println("password: " + user.get("password"));
		String name = (String) user.get("name");
		String password = (String) user.get("password");
  	if(name.equals("zsz") && password.equals("888888")){ 		
			return "login success!";
		}else{
			return "login failed";
		}
  }

后臺以8080端口啟動，前臺以8081啟動，此時(shí)無法跨域，瀏覽器控制臺會報(bào)錯：

2.springboot設(shè)置CORS

此處主要有兩種方法（但是貌似有其他博客還有更多種），在springboot中實(shí)現(xiàn)都比較簡單（反正springboot好像就是各種省事各種簡單）。

方法1：

@CrossOrigin(origins = "http://localhost:8081", maxAge = 3600)

直接在控制器方法前注解，設(shè)置可以跨域的源ip和端口，以及預(yù)檢有效期maxAge等參數(shù)。

方法2：

編寫配置類，配置全局的CORS設(shè)置。

@Configuration
public class MyCorsConfig {	
	@Bean
	public WebMvcConfigurer corsConfigurer(){
	 return new WebMvcConfigurerAdapter() {
      @Override
      public void addCorsMappings(CorsRegistry registry) {
        // 限制了路徑和域名的訪問
        /*registry.addMapping("/api*").allowedOrigins("http://localhost:8081");*/
       registry.addMapping("/**")
        .allowedOrigins(ALL)
        .allowedMethods(ALL)
        .allowedHeaders(ALL)
        .allowCredentials(true);
      }
    };
	}		
}

如果路徑配置成以上的 /**則對所有源路徑均接受跨域訪問，當(dāng)然也可以配置更詳細(xì)的路徑。

這樣可以成功訪問后臺，瀏覽器中可以看到http請求和響應(yīng)的結(jié)果如下圖：

3.CORS非簡單請求預(yù)檢請求的抓包驗(yàn)證

根據(jù)阮一峰大神的博客所述，CORS簡單請求只發(fā)送一次請求，服務(wù)器設(shè)置支持CORS則會在響應(yīng)內(nèi)容中添加Acess-Control-Allow-Origin等字段，否則不添加，瀏覽器知道出錯，從而拋出異常；CORS非簡單請求時(shí)，會先進(jìn)行一次預(yù)檢（preflight）請求，瀏覽器根據(jù)響應(yīng)內(nèi)容進(jìn)行正式的XMLHttpRequest請求。

在我的demo中，我通過將http請求的 content-type 設(shè)置為application/json進(jìn)行非簡單請求。此處要說明一下，axios默認(rèn)情況下發(fā)送請求的格式是application/json而不是我之前用jQuery發(fā)送ajax請求的application/x-www-form-urlencoded, 而我之前用的另一種方法構(gòu)造查詢字符串，最終發(fā)送請求的content-type會變?yōu)閍pplication/x-www-form-urlencoded。

var userParams = this.$qs.stringify(this.User)

前臺請求代碼如本文第一節(jié)中所示，在axios請求中直接傳入U(xiǎn)ser對象即可。在后端不設(shè)置CORS的時(shí)候，控制器信息為:

協(xié)議內(nèi)容為：

而設(shè)置了CORS，預(yù)檢請求結(jié)果為：

請求成功，并且在響應(yīng)頭中添加了各種字段。

再次發(fā)起XHR請求后，結(jié)果為：

以上實(shí)驗(yàn)驗(yàn)證證明了兩種CORS請求的過程正如預(yù)期。希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評論