vue axios請(qǐng)求后端接受不到token的問(wèn)題。

相關(guān)概念

什么是跨域？

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

具體來(lái)說(shuō)，以下情況都屬于跨域請(qǐng)求：

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

axios請(qǐng)求后端接受不到token

具體看下面博客：

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

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

淺談：

axios默認(rèn)發(fā)的是復(fù)雜請(qǐng)求;而cors復(fù)雜請(qǐng)求；會(huì)先發(fā)一次options預(yù)請(qǐng)求，所以我們進(jìn)行token

校驗(yàn)必須要先把第一次options請(qǐng)求過(guò)濾出去。

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

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

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

實(shí)例代碼如下：

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

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

后端

允許跨域請(qǐng)求攜帶憑證信息

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

上面跨域需要更改：

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

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

前端

?設(shè)置withCredentials = true

?