欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請(qǐng)求

 更新時(shí)間:2018年09月05日 11:29:57   作者:小豬zsz  
這篇文章主要介紹了vue+springboot實(shí)現(xiàn)項(xiàng)目的CORS跨域請(qǐng)求,小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧

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

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

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

我的demo里填寫用戶名和密碼,然后點(diǎn)擊登錄按鈕向后臺(tái)發(fā)起登錄請(qǐng)求,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);
      });
     }
   }

后臺(tái)控制器部分,對(duì)登錄請(qǐng)求的處理:

/*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";
		}
  }

后臺(tái)以8080端口啟動(dòng),前臺(tái)以8081啟動(dòng),此時(shí)無法跨域,瀏覽器控制臺(tái)會(huì)報(bào)錯(cuò):


2.springboot設(shè)置CORS

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

方法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);
      }
    };
	}		
}

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

這樣可以成功訪問后臺(tái),瀏覽器中可以看到http請(qǐng)求和響應(yīng)的結(jié)果如下圖:


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

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

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

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

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


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


而設(shè)置了CORS,預(yù)檢請(qǐng)求結(jié)果為:

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

再次發(fā)起XHR請(qǐng)求后,結(jié)果為:


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

相關(guān)文章

  • vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決

    vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決

    這篇文章主要介紹了vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-12-12
  • vue日期時(shí)間工具類詳解

    vue日期時(shí)間工具類詳解

    這篇文章主要為大家詳細(xì)介紹了vue日期時(shí)間工具類,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2022-06-06
  • vue?css?相對(duì)路徑導(dǎo)入問題級(jí)踩坑記錄

    vue?css?相對(duì)路徑導(dǎo)入問題級(jí)踩坑記錄

    這篇文章主要介紹了vue?css?相對(duì)路徑導(dǎo)入問題級(jí)踩坑記錄,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-06-06
  • 將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟

    將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟

    最近接了個(gè)小活,其中甲方要求把vue項(xiàng)目打包成exe安裝在windows上,其中有也會(huì)出現(xiàn)一些小問題和優(yōu)化,特此記錄,這篇文章主要給大家介紹了關(guān)于將vue項(xiàng)目打包成電腦端應(yīng)用.exe的完整步驟,需要的朋友可以參考下
    2023-10-10
  • 一篇文章教你實(shí)現(xiàn)VUE多個(gè)DIV,button綁定回車事件

    一篇文章教你實(shí)現(xiàn)VUE多個(gè)DIV,button綁定回車事件

    這篇文章主要介紹了VUE多個(gè)DIV綁定回車事件,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧
    2021-10-10
  • vue中使用GraphQL的實(shí)例代碼

    vue中使用GraphQL的實(shí)例代碼

    這篇文章主要介紹了vue中使用GraphQL的實(shí)例代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下
    2019-11-11
  • vue?v-model的詳細(xì)講解(推薦!)

    vue?v-model的詳細(xì)講解(推薦!)

    vue中經(jīng)常使用到和這類表單元素,vue對(duì)于這些元素的數(shù)據(jù)綁定和我們以前經(jīng)常用的jQuery有些區(qū)別,下面這篇文章主要給大家介紹了關(guān)于vue?v-model的相關(guān)資料,需要的朋友可以參考下
    2022-04-04
  • Vue中extends繼承和組件復(fù)用性詳解

    Vue中extends繼承和組件復(fù)用性詳解

    這篇文章主要給大家介紹了關(guān)于Vue中extends繼承和組件復(fù)用性的相關(guān)資料,組件(Component)是Vue.js最強(qiáng)大的功能之一,組件可以擴(kuò)展HTML元素,封裝可重用的代碼,需要的朋友可以參考下
    2023-11-11
  • element?upload?鉤子函數(shù)的坑及解決

    element?upload?鉤子函數(shù)的坑及解決

    這篇文章主要介紹了element?upload?鉤子函數(shù)的坑及解決方案,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-10-10
  • vue中g(shù)etters的使用與四個(gè)map方法的使用方式

    vue中g(shù)etters的使用與四個(gè)map方法的使用方式

    這篇文章主要介紹了vue中g(shù)etters的使用與四個(gè)map方法的使用方式,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2024-01-01

最新評(píng)論