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

相關(guān)概念

什么是跨域？

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

具體來說，以下情況都屬于跨域請(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)求的原因及如何通過_vue預(yù)請(qǐng)求_millet109的博客-CSDN博客

?后端接收不到前端傳入的header參數(shù)信息 - 簡(jiǎn)書 (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)求過濾出去。

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

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

但其實(shí)我們自定義了一個(gè)filter，并不受springmvc設(shè)置的跨域管理，因此，我們需在filter自定邏輯判斷。

實(shí)例代碼如下：

 // 1.排除options請(qǐng)求，防止報(bào)錯(cuò)
            if(!request.getMethod().equals("OPTIONS")){
                token = request.getHeader("Authorization").substring(6); // 沒有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填寫到響應(yīng)的Header信息里（即誰(shuí)訪問我，我允許誰(shuí)），代碼如下：

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

前端

?設(shè)置withCredentials = true

?文章來源地址http://www.zghlxwxcb.cn/news/detail-695627.html

到了這里，關(guān)于因?yàn)閍xios請(qǐng)求后端，接收不到token的問引出的問題的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！