web-dev-qa-db-ja.com

axiosで認証ヘッダを送る方法

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}`;

更新：

Coleの答えが問題解決に役立ちました。私はDjango-cors-headersミドルウェアを使用しています。これはすでにデフォルトで認証ヘッダを処理しています。

しかし、私はエラーメッセージを理解することができ、私のaxiosリクエストコードのエラーを修正しました。

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

単純ではないhttpリクエストでは、あなたのブラウザは最初に "preflight"リクエスト（OPTIONSメソッドリクエスト）を送信し、問題のサイトが安全な情報を送信するために何を考慮するかを決定します（クロスオリジンについては here を参照）これに関するポリシー仕様）。 Hostがプリフライトレスポンスで設定できる関連ヘッダーの1つはAccess-Control-Allow-Headersです。あなたが送信したいヘッダのいずれかが仕様のホワイトリストに載せられたヘッダのリストにもサーバのプリフライトレスポンスにもリストされていなかった場合、ブラウザはあなたの要求を送信することを拒否します。

あなたの場合、あなたはAuthorizationヘッダを送信しようとしていますが、これは普遍的に安全なヘッダを送信するためのものとは考えられていません。ブラウザはプリフライトリクエストを送信して、サーバーにヘッダーを送信するかどうかを問い合わせます。サーバーは空のAccess-Control-Allow-Headersヘッダー（「余分なヘッダーを許可しない」ことを意味すると見なされる）を送信しているか、許可ヘッダーのリストにAuthorizationを含まないヘッダーを送信しています。このため、ブラウザはリクエストを送信するのではなく、代わりにエラーをスローして通知することを選択します。

いずれにしてもこのリクエストを送信できるJavascriptの回避策は、ブラウザがあなた自身の安全のために強制しようとしているクロスオリジンリクエストポリシーに反するので、バグと見なすべきです。

tl; dr - Authorizationヘッダーを送信したい場合は、それを許可するようにサーバーを設定した方が良いでしょう。そのURLでAccess-Control-Allow-Headers: Authorizationヘッダーを付けてOPTIONS要求に応答するようにサーバーをセットアップしてください。

57
Cole Erickson

これを試して ：

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );
26
Matija Župančić

これは私のために働きました：

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

すべてのリクエストに追加するのではなく、デフォルトの設定として追加することができます。

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

あなたはほぼ正しいです、ちょうどあなたのコードをこのように調整してください

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

私がバッククォートを置く場所に気付いた、私がベアラの後に ' - 'を加えた、あなたがサーバー側で確実に扱うならばあなたは省略することができます

3
Jalasem

Axios.get関数を呼び出す代わりに

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