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

下面是我的攔截器：

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

回答

編輯回答

夢若殤

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

OPTIONS用來請求時的預(yù)檢，用以判斷實際發(fā)送的請求是否安全(因為你請求頭攜帶了Authorization),所以后端得允許
這個請求通過才能有下一步的請求的。

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

2017年5月7日 12:40

編輯回答

拮據(jù)

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

jwt-spring-security-demo
為什么使用postman發(fā)送請求時不會有跨域問題？

if (request.getMethod().equals("OPTIONS"))
            //跨域資源共享標準新增了一組 HTTP 首部字段，允許服務(wù)器聲明哪些源站有權(quán)限訪問哪些資源。
            // 另外，規(guī)范要求，對那些可能對服務(wù)器數(shù)據(jù)產(chǎn)生副作用的 HTTP 請求方法（特別是 GET 以外的 HTTP 請求，或者搭配某些 MIME 類型的 POST 請求），
            // 瀏覽器必須首先使用 OPTIONS 方法發(fā)起一個預(yù)檢請求（preflight request），
            // 從而獲知服務(wù)端是否允許該跨域請求。服務(wù)器確認允許之后，才發(fā)起實際的 HTTP 請求。
            // 在預(yù)檢請求的返回中，服務(wù)器端也可以通知客戶端，是否需要攜帶身份憑證（包括 Cookies 和 HTTP 認證相關(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

編輯回答