axios 設(shè)置headers.Authorization都成功了，但是請(qǐng)求頭還是沒(méi)有，這是為什么？

下面是我的攔截器：

//Axios請(qǐng)求攔截器，隨著業(yè)務(wù)的復(fù)雜，Axios層的使用將會(huì)越來(lái)越復(fù)雜，寫(xiě)個(gè)精簡(jiǎn)版的就行了。
axios.interceptors.request.use(config => {
    let token = store.state.token;
    if (token) {  // 判斷是否存在token，如果存在的話，則每個(gè)http header都加上token
        config.headers.Authorization = token;
        console.log('interceptors config=',config)
    }
    return config
}, error => {
    return Promise.reject(error)
})

回答

編輯回答

夢(mèng)若殤

你第二張截圖是以O(shè)PTIONS請(qǐng)求發(fā)過(guò)去后端的，OPTIONS請(qǐng)求肯定沒(méi)有你這個(gè)headers.Authorization，并且你這個(gè)請(qǐng)求已經(jīng)返回了一個(gè)401狀態(tài)值了。

OPTIONS用來(lái)請(qǐng)求時(shí)的預(yù)檢，用以判斷實(shí)際發(fā)送的請(qǐng)求是否安全(因?yàn)槟阏?qǐng)求頭攜帶了Authorization),所以后端得允許
這個(gè)請(qǐng)求通過(guò)才能有下一步的請(qǐng)求的。

解決方法：后端接口允許這個(gè)OPTIONS請(qǐng)求通過(guò),通過(guò)后你就發(fā)現(xiàn)前端同一個(gè)請(qǐng)求發(fā)送了兩次, 在第二條請(qǐng)求里你可以發(fā)現(xiàn)你的Authorization已經(jīng)顯示你面前了。

2017年5月7日 12:40

編輯回答

拮據(jù)

已經(jīng)解決了，我還在想為什么postman可以訪問(wèn)，源來(lái)postman不存在跨域的問(wèn)題，所以沒(méi)問(wèn)題，所以只要后臺(tái)加上跨域和放開(kāi)Authorization權(quán)限就OK了，
參考地址：

jwt-spring-security-demo
為什么使用postman發(fā)送請(qǐng)求時(shí)不會(huì)有跨域問(wèn)題？

if (request.getMethod().equals("OPTIONS"))
            //跨域資源共享標(biāo)準(zhǔn)新增了一組 HTTP 首部字段，允許服務(wù)器聲明哪些源站有權(quán)限訪問(wèn)哪些資源。
            // 另外，規(guī)范要求，對(duì)那些可能對(duì)服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請(qǐng)求方法（特別是 GET 以外的 HTTP 請(qǐng)求，或者搭配某些 MIME 類型的 POST 請(qǐng)求），
            // 瀏覽器必須首先使用 OPTIONS 方法發(fā)起一個(gè)預(yù)檢請(qǐng)求（preflight request），
            // 從而獲知服務(wù)端是否允許該跨域請(qǐng)求。服務(wù)器確認(rèn)允許之后，才發(fā)起實(shí)際的 HTTP 請(qǐng)求。
            // 在預(yù)檢請(qǐng)求的返回中，服務(wù)器端也可以通知客戶端，是否需要攜帶身份憑證（包括 Cookies 和 HTTP 認(rèn)證相關(guān)數(shù)據(jù)）。
            // 參考：https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Access_control_CORS
            response.setStatus(HttpServletResponse.SC_OK);
        else
            filterChain.doFilter(request, response);

2018年5月15日 00:42

編輯回答