vue+springboot實現(xiàn)項目的CORS跨域請求
跨域資源共享CORS（Cross-origin Resource Sharing），是W3C的一個標準，允許瀏覽器向跨源的服務器發(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設置方法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設置CORS
此處主要有兩種方法（但是貌似有其他博客還有更多種），在springboot中實現(xiàn)都比較簡單（反正springboot好像就是各種省事各種簡單）。
方法1：
@CrossOrigin(origins = "http://localhost:8081", maxAge = 3600)
直接在控制器方法前注解，設置可以跨域的源ip和端口，以及預檢有效期maxAge等參數(shù)。
方法2：
編寫配置類，配置全局的CORS設置。
@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請求和響應的結(jié)果如下圖：
3.CORS非簡單請求預檢請求的抓包驗證
根據(jù)阮一峰大神的博客所述，CORS簡單請求只發(fā)送一次請求，服務器設置支持CORS則會在響應內(nèi)容中添加Acess-Control-Allow-Origin等字段，否則不添加，瀏覽器知道出錯，從而拋出異常；CORS非簡單請求時，會先進行一次預檢（preflight）請求，瀏覽器根據(jù)響應內(nèi)容進行正式的XMLHttpRequest請求。
在我的demo中，我通過將http請求的 content-type 設置為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對象即可。在后端不設置CORS的時候，控制器信息為:
協(xié)議內(nèi)容為：
而設置了CORS，預檢請求結(jié)果為：
請求成功，并且在響應頭中添加了各種字段。
再次發(fā)起XHR請求后，結(jié)果為：
以上實驗驗證證明了兩種CORS請求的過程正如預期。希望對大家的學習有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
碰到一個問題,選擇框的數(shù)據(jù)是后端傳過來的,下拉框的數(shù)據(jù)也是后端傳過來的,但是打開下拉框時,發(fā)現(xiàn)數(shù)據(jù)沒有高亮,最后通過只要選擇框v-model給的值和option的value綁定的值一致,就可以高亮,感興趣的朋友一起看看吧2023-12-12
這篇文章主要為大家詳細介紹了vue實現(xiàn)可移動的懸浮按鈕，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要介紹了vue3如何實現(xiàn)掛載并使用axios，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-06-06
在?Vue?項目中如何引用?assets?文件夾中的圖片(方式匯總)
Vue中引用assets文件夾中的圖片有多種方式,在.vue文件的模板部分,使用相對路徑或通過@別名引用圖片,在CSS中,通過相對路徑或@別名引用圖片作為背景,在JavaScript中,通過import語句導入圖片資源,并使用v-bind在模板中綁定顯示,這些方法均可有效管理和引用項目中的圖片資源2024-09-09
這篇文章主要為大家詳細介紹了Vue實現(xiàn)簡單登錄界面，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-06-06
el-upload http-request使用 多個文件上傳攜帶其他參數(shù)方式
這篇文章主要介紹了el-upload http-request使用 多個文件上傳攜帶其他參數(shù)方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家詳細介紹了Vue3頁面如何自適應表格滾動高度,文中的示例代碼講解詳細,具有一定的借鑒價值,感興趣的小伙伴可以跟隨小編一起學習一下2024-02-02
這篇文章主要介紹了vue 中filter的多種用法,本文通過實例代碼給大家介紹的非常詳細，需要的朋友參考下吧2018-04-04
vue-seamless-scroll 實現(xiàn)簡單自動無縫滾動且添加對應點擊事件的簡單整理
vue-seamless-scroll是一個基于Vue.js的簡單無縫滾動組件, 基于requestAnimationFrame實現(xiàn),配置多滿足多樣需求，目前支持上下左右無縫滾動，單步滾動，及支持水平方向的手動切換功能，本節(jié)介紹，vue添加 vue-seamless-scroll實現(xiàn)自動無縫滾動的效果，并對應添加點擊事件2023-01-01
這篇文章主要介紹了Vue Element校驗validate的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-09-09