【Java】Vue在請求後端接口跨域的問題

嘗試前後端分離模式,前端使用VUE的axios請求本地API會報錯:

 什麼是跨域

跨域,即跨站HTTP請求(Cross-site HTTP request),指發起請求的資源所在域不同於請求指向資源所在域的HTTP請求。

當使用前後端分離,後端主導的開發方式進行前後端協作開發時,常常有如下情景:

  1. 後端開發完畢在服務器上進行部署並給前端API文檔。
  2. 前端在本地進行開發並向遠程服務器上部署的後端發送請求。

在這種開發過程中,如果前端想要一邊開發一邊測試接口,就需要使用跨域的方式。

解決方案

目前在網上搜集到兩種解決方案,推薦是改後端,允許跨域

第一種方法:在Spring中配置

創建一個WebConfig來進行全局配置

Spring 5.0後,WebMvcConfigurerAdapter被廢棄,我們使用官方推薦的WebMvcConfigurer 

@Configuration
public class WebConfig implements WebMvcConfigurer {
    @Override
    public void addCorsMappings(CorsRegistry registry) {
        registry.addMapping("/**")//設置允許跨域的路徑
                .allowedOrigins("http://localhost:8080")//設置允許跨域請求的域名
                .allowCredentials(true)//是否允許證書 不再默認開啓
                .allowedMethods("GET", "POST", "PUT", "DELETE")//設置允許的方法
                .maxAge(3600);//跨域允許時間
    }

}

注意這裏allowedOrigins必須明確列出是要放開哪些路徑,不能直接寫*,會報錯

當然你也可以對某些接口進行單獨配置:

@CrossOrigin(origins = {"http://localhost:8080"}

第二種方法:在VUE中配置

在vue的vue.config.js中去配置

 

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章