【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中去配置