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

更新：

コールの答えは私が問題を見つけるのに役立ちました。私はすでにデフォルトで認証ヘッダーを処理するdjango-cors-headersミドルウェアを使用しています。

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

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

単純でないhttpリクエストでは、問題のサイトが安全に送信できる情報と見なすものを判断するために、ブラウザは最初に「プリフライト」リクエスト（OPTIONSメソッドリクエスト）を送信します（これに関するクロスオリジンポリシーの仕様については、こちらを参照してください）。ホストがプリフライト応答で設定できる関連ヘッダーの1つはAccess-Control-Allow-Headersです。送信するヘッダーのいずれかが、ホワイトリストに登録されたヘッダーの仕様のリストにもサーバーのプリフライト応答にも含まれていない場合、ブラウザーはリクエストの送信を拒否します。

あなたのケースでは、Authorizationヘッダーを送信しようとしていますが、これはヘッダーを送信するのに普遍的に安全なものの1つとは見なされていません。次に、ブラウザーはプリフライト要求を送信して、サーバーにそのヘッダーを送信するかどうかを尋ねます。サーバーが空のAccess-Control-Allow-Headersヘッダー（「追加のヘッダーを許可しない」という意味と見なされる）を送信しているかAuthorization、許可されたヘッダーのリストに含まれていないヘッダーを送信しています。このため、ブラウザはリクエストを送信せず、代わりにエラーをスローして通知することを選択します。

ブラウザが自分の安全のために実施しようとしているクロスオリジンリクエストポリシーに反しているため、このリクエストを送信できるJavaScriptの回避策は、バグと見なす必要があります。

tl; dr-Authorizationヘッダーを送信する場合は、サーバーがそれを許可するように構成する必要があります。ヘッダーを使用OPTIONSしてそのURLのリクエストに応答するようにサーバーを設定しますAccess-Control-Allow-Headers: Authorization。

これを試して ：

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

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

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

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

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

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

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

バックティックを配置する場所に注意してください。ベアラの後に「」を追加しました。サーバー側で確実に処理する場合は省略できます。

axios.get関数を呼び出す代わりに、以下を使用します。

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

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');

ブロック引用：オプションと承認をsetHeader（）に追加する必要があります

この変更により問題が解決しました。試してみてください！

corsミドルウェアをインストールします。私たちは独自のコードでそれを解決しようとしましたが、すべての試みは惨めに失敗しました。

これでうまくいきました：

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

元のリンク

これを試すことができます。

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