前言
前后臺分離開發(fā)模式越來越來成為主流杨拐，剛接觸這種開發(fā)模式時糊肠，我們必定會遇到一個問題： 跨域。
跨域
產(chǎn)生跨域問題的罪魁禍?zhǔn)资?a target="_blank">瀏覽器同源策略悯辙，當(dāng)協(xié)議琳省、子域名、主域名躲撰、端口號中任意一個不相同時岛啸，都算作不同域，不同域之間的網(wǎng)絡(luò)請求就會觸發(fā)跨域問題茴肥。跨域并不是請求發(fā)不出去荡灾，請求能發(fā)出去瓤狐，服務(wù)端能收到請求并正常返回結(jié)果，只是結(jié)果被瀏覽器攔截了批幌。
image
解決方法
前后臺分離模式目前主流解決方案有三種：
- webpack proxy：僅開發(fā)模式有效础锐，打包后會失效。
- cors：開發(fā)和生產(chǎn)環(huán)境都可以用荧缘。
- nginx： 僅生產(chǎn)環(huán)境可用皆警。
本文主要講的是 cors 方式，需要前后臺進(jìn)行配合截粗。
前臺
前臺使用 vue-admin-template 腳手架信姓，網(wǎng)絡(luò)請求使用 Axios。Axios 是一個基于 promise 的 HTTP 客戶端绸罗，可以發(fā)送 get意推、post 請求。
找到項(xiàng)目中 Axios 封裝的文件珊蟀，在 Axios 創(chuàng)建時增加屬性 withCredentials: true ：
const service = axios.create({
baseURL: process.env.VUE_APP_BASE_API,
withCredentials: true,
timeout: 5000
})
后臺
后臺新建
WebMvcConfig類菊值，繼承WebMvcConfigurer，統(tǒng)一配置全局跨域請求。
@Configuration
public class WebMvcConfig implements WebMvcConfigurer {
/**
* 允許跨域訪問
*/
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/**") // 可限制哪個請求可以通過跨域
.allowedHeaders("*") // 可限制固定請求頭可以通過跨域
.allowedMethods("*") // 可限制固定methods可以通過跨域
.allowedOrigins("*") // 可限制訪問ip可以通過跨域
.allowCredentials(true) // 是否允許發(fā)送cookie
.exposedHeaders(HttpHeaders.SET_COOKIE);
}
}
結(jié)尾
至此跨域問題算是解決了腻窒，這里是示例源碼昵宇，希望可以幫助到你吧。
