vue axios請求后端接受不到token的問題。

相關(guān)概念

什么是跨域？

跨域指的是在瀏覽器環(huán)境下，當(dāng)發(fā)起請求的域（或者網(wǎng)站）與請求的資源所在的域之間存在協(xié)議、主機或端口中的任何一個條件不同的情況。換句話說，只要協(xié)議、主機或端口中有一個不同，就會被認為是跨域請求。

具體來說，以下情況都屬于跨域請求：

• 域名不同：例如從https://www.example.com向https://api.example.com發(fā)送請求。
• 端口不同：例如從https://www.example.com:8080向https://www.example.com:3000發(fā)送請求。
• 協(xié)議不同：例如從http://www.example.com向https://www.example.com發(fā)送請求。

axios請求后端接受不到token

具體看下面博客：

vue中axios發(fā)送OPTIONS預(yù)檢請求的原因及如何通過_vue預(yù)請求_millet109的博客-CSDN博客

?后端接收不到前端傳入的header參數(shù)信息 - 簡書 (jianshu.com)

淺談：

axios默認發(fā)的是復(fù)雜請求;而cors復(fù)雜請求；會先發(fā)一次options預(yù)請求，所以我們進行token

校驗必須要先把第一次options請求過濾出去。

但是，這里又一個問題，我們通過springMvc設(shè)置跨域代買如下：

@Configuration
public class CorsConfig implements WebMvcConfigurer {@Overridepublic void addCorsMappings(CorsRegistry registry) {// 注冊 CORS 配置registry.addMapping("/**").allowedOriginPatterns("*").allowedHeaders("*").allowCredentials(true).allowedMethods("GET","POST","PUT","DELETE") // 注意就是要請求方式上，要改成全部.maxAge(3600);}
}

但其實我們自定義了一個filter，優(yōu)先級在springmvc設(shè)置的跨域之上，因此，我們需在filter自定邏輯判斷。

實例代碼如下：

 // 1.排除options請求，防止報錯if(!request.getMethod().equals("OPTIONS")){token = request.getHeader("Authorization").substring(6); // 沒有token,這路為null}// 設(shè)置跨域response.setHeader("Access-Control-Allow-Origin", "*"); // 允許所有域名跨域請求response.setHeader("Access-Control-Allow-Methods", "*"); // 允許所欲方法跨域親夠response.setHeader("Access-Control-Allow-Headers", "*"); // 允許請求頭設(shè)置人和自定義信息// 預(yù)檢請求緩存時間（秒），即在這個時間內(nèi)相同的預(yù)檢請求不再發(fā)送，直接使用緩存結(jié)果。response.setHeader("Access-Control-Max-Age", "3600");

后端響應(yīng)cookie,前端接收不到

后端

允許跨域請求攜帶憑證信息

response.setHeader("Access-Control-Allow-Credentials", "true");

上面跨域需要更改：

服務(wù)器server端要配置Access-Control-Allow-Origin到以上配置為止，發(fā)送ajax請求，我們發(fā)現(xiàn)還會出現(xiàn)一個錯誤，提示我們 Access-Control-Allow-Origin 不能用 * 通配符。原因是：當(dāng)服務(wù)器端 Access-Control-Allow-Credentials = true時，參數(shù)Access-Control-Allow-Origin 的值不能為 '*' 。我們重新設(shè)置Access-Control-Allow-Origin的值，當(dāng)服務(wù)器端接收到請求后，在返回響應(yīng)時，把請求的域Origin填寫到響應(yīng)的Header信息里（即誰訪問我，我允許誰），代碼如下：

response.setHeader("Access-Control-Allow-Origin", request.getHeader("Origin"));

前端

?設(shè)置withCredentials = true

?