vue+springboot實現(xiàn)項目的CORS跨域請求
跨域資源共享CORS(Cross-origin Resource Sharing),是W3C的一個標準,允許瀏覽器向跨源的服務(wù)器發(fā)起XMLHttpRequest請求,克服ajax請求只能同源使用的限制。關(guān)于CORS的詳細解讀,可參考阮一峰大神的博客:跨域資源共享CORS詳解。本文為通過一個小demo對該博客中分析內(nèi)容的一些驗證。
1.springboot+vue項目的構(gòu)建和啟動
細節(jié)不在此贅述,任何簡單的springboot項目就可以,而前端vue項目只需用axios發(fā)ajax請求即可。
我的demo里填寫用戶名和密碼,然后點擊登錄按鈕向后臺發(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啟動,此時無法跨域,瀏覽器控制臺會報錯:
2.springboot設(shè)置CORS
此處主要有兩種方法(但是貌似有其他博客還有更多種),在springboot中實現(xiàn)都比較簡單(反正springboot好像就是各種省事各種簡單)。
方法1:
@CrossOrigin(origins = "http://localhost:8081", maxAge = 3600)
直接在控制器方法前注解,設(shè)置可以跨域的源ip和端口,以及預檢有效期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); } }; } }
如果路徑配置成以上的 /**則對所有源路徑均接受跨域訪問,當然也可以配置更詳細的路徑。
這樣可以成功訪問后臺,瀏覽器中可以看到http請求和響應(yīng)的結(jié)果如下圖:
3.CORS非簡單請求預檢請求的抓包驗證
根據(jù)阮一峰大神的博客所述,CORS簡單請求只發(fā)送一次請求,服務(wù)器設(shè)置支持CORS則會在響應(yīng)內(nèi)容中添加Acess-Control-Allow-Origin等字段,否則不添加,瀏覽器知道出錯,從而拋出異常;CORS非簡單請求時,會先進行一次預檢(preflight)請求,瀏覽器根據(jù)響應(yīng)內(nèi)容進行正式的XMLHttpRequest請求。
在我的demo中,我通過將http請求的 content-type 設(shè)置為application/json進行非簡單請求。此處要說明一下,axios默認情況下發(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請求中直接傳入User對象即可。在后端不設(shè)置CORS的時候,控制器信息為:
協(xié)議內(nèi)容為:
而設(shè)置了CORS,預檢請求結(jié)果為:
請求成功,并且在響應(yīng)頭中添加了各種字段。
再次發(fā)起XHR請求后,結(jié)果為:
以上實驗驗證證明了兩種CORS請求的過程正如預期。希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關(guān)文章
vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決
這篇文章主要介紹了vant使用datetime-picker組件設(shè)置maxDate和minDate的坑及解決方案,具有很好的參考價值,希望對大家有所幫助。如有錯誤或未考慮完全的地方,望不吝賜教2022-12-12一篇文章教你實現(xiàn)VUE多個DIV,button綁定回車事件
這篇文章主要介紹了VUE多個DIV綁定回車事件,具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2021-10-10vue中g(shù)etters的使用與四個map方法的使用方式
這篇文章主要介紹了vue中g(shù)etters的使用與四個map方法的使用方式,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-01-01