如何使用 axios 發送授權標頭

Question

如何通過 axios.js 發送帶有令牌的身份驗證標頭？ 我嘗試了一些沒有成功的事情，例如：

const header = `Authorization: Bearer ${token}`;
return axios.get(URLConstants.USER_URL, { headers: { header } });

給我這個錯誤：

XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.

我已經通過設置全局默認值設法讓它工作，但我猜這不是單個請求的最佳主意：

axios.defaults.headers.common['Authorization'] = `Bearer ${token}`;

更新 ：

科爾的回答幫助我找到了問題所在。 我正在使用django-cors-headers 中間件，默認情況下它已經處理了授權標頭。

但是我能夠理解錯誤消息並修復了我的 axios 請求代碼中的錯誤，它應該如下所示

return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });

Answer 1

對於非簡單的 http 請求，您的瀏覽器將首先發送“預檢”請求（OPTIONS 方法請求），以確定相關站點認為要發送的安全信息（有關此的跨域策略規范，請參見此處）。 主機可以在預檢響應中設置的相關標頭之一是Access-Control-Allow-Headers 。 如果您要發送的任何標頭未在規范的白名單標頭列表或服務器的預檢響應中列出，則瀏覽器將拒絕發送您的請求。

在您的情況下，您正在嘗試發送一個Authorization標頭，這不被認為是普遍安全的發送標頭之一。 然后瀏覽器發送一個預檢請求，詢問服務器是否應該發送該標頭。 服務器要么發送一個空的Access-Control-Allow-Headers標頭（這被認為意味着“不允許任何額外的標頭”），要么它發送的標頭在其允許的標頭列表中不包含Authorization 。 因此，瀏覽器不會發送您的請求，而是選擇通過拋出錯誤來通知您。

您發現任何允許您發送此請求的 Javascript 解決方法都應被視為錯誤，因為它違反了您的瀏覽器為了您自己的安全而試圖強制執行的跨源請求策略。

tl;dr - 如果您想發送Authorization標頭，您的服務器最好配置為允許它。 設置您的服務器，以便它使用Access-Control-Allow-Headers: Authorization標頭響應該 url 上的OPTIONS請求。

Answer 2

這對我有用：

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });

Answer 3

您可以像這樣將其添加為默認配置，而不是將其添加到每個請求中。

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}` 

Answer 4

嘗試這個 ：

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

Answer 5

您幾乎是正確的，只需以這種方式調整您的代碼

const headers = { Authorization: `Bearer ${token}` };
return axios.get(URLConstants.USER_URL, { headers });

注意我放置反引號的位置，我在 Bearer 之后添加了 ' '，如果您確定在服務器端處理，則可以省略

Answer 6

而不是調用 axios.get 函數使用：

axios({ method: 'get', url: 'your URL', headers: { Authorization: `Bearer ${token}` } })

Answer 7

你可以試試這個。

axios.get(
    url,
    {headers: {
            "Access-Control-Allow-Origin" : "*",
            "Content-type": "Application/json",
            "Authorization": `Bearer ${your-token}`
            }   
        }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

Answer 8

為您的請求創建一個新的 axios 實例

  const instance=axios.create({
    baseURL:'www.google.com/'
    headers:{
        'Content-Type':'application/json',
                    'Acess-Control-Allow-Origin':'*',
                    'Authorization':`Bearer ${token}`,
                    'Accept': "application/json"
        }
    })

await instance.get(url,data)

Answer 9

安裝cors中間件。 我們試圖用我們自己的代碼來解決它，但所有的嘗試都以慘敗告終。

這使它起作用：

cors = require('cors')
app.use(cors());

原文鏈接

Answer 10

res.setHeader('Access-Control-Allow-Headers',
            'Access-Control-Allow-Headers, Origin,OPTIONS,Accept,Authorization, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');

Blockquote ：您必須將 OPTIONS & Authorization 添加到 setHeader()

這個改變解決了我的問題，試試吧！

Answer 11

Derric的頁面對描述CORS，預檢和GET請求的工作方式非常有幫助，尤其是在您嘗試將GET與授權標頭一起使用的情況下。 https://www.moesif.com/blog/technical/cors/Authoritative-Guide-to-CORS-Cross-Origin-Resource-Sharing-for-REST-APIs/#

我無法使用任何Chrome瀏覽器插件，但是我無法在沒有安全性且沒有CORS的情況下啟動Chrome，因此預檢請求不會與GET + Authorization標頭一起發送。

在Windows 10上，命令為：

“ C：\\ Program Files（x86）\\ Google \\ Chrome \\ Application \\ chrome.exe” --disable-web-security --disable-gpu --user-data-dir =〜/ chromeTemp

感謝： https : //alfilatov.com/posts/run-chrome-without-cors/

Answer 12

const response=await axios(url,
    method:"GET"
    {
     headers: {
        "Authorization" : `Bearer ${token}`
      }
    })