web-dev-qa-db-ja.com

Axiosでの認証ヘッダーの設定

私はaxiosを使用してNational Park Service APIにGETリクエストを作成しようとしましたが、リクエストヘッダーのAPIキーを無効に設定するいくつかの方法を試しました。どんな援助でも大歓迎です。

私が試してみました：

axios.defaults.headers.common['Authorization'] = "MY-API-KEY";
axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell')
.then((resp) => {
    console.dir(resp);
});

そして

let config = {'Authorization': 'MY-API-KEY'};
axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', config)
.then((resp) => {
    console.dir(resp);
});

両方とも401を返します。PostmanでGETリクエストを送信すると機能します。キーフィールドにAuthorizationを入力し、値フィールドにAPIキーを入力します。

ありがとうございました。

httpreactjsgethttp-status-code-401axios
5
jcarapia

この問題は、ブラウザーのCORS OPTIONSリクエストが原因で発生します。これは、axiosとは関係ありません。 https://developer.nps.gov OPTIONSを含むすべてのHTTPリクエストにAuthorizationヘッダーが必要です。ただし、すべてのカスタムHTTPヘッダーはOPTIONSから除外されます。 https://www.w3.org/TR/cors/#cross-Origin-request-with-preflight- を参照してください

National Park Service APIは、OPTIONSリクエストにAuthorizationヘッダーを必要としないはずですが、必要です。とにかく、回避策があります：独自のバックエンドで転送ルートを作成し、ブラウザーからのHTTPリクエストを受け入れ、バックエンドで https://developer.nps.gov からデータを取得し、最後にそれを返しますブラウザに。

実際、ブラウザからサードパーティの認証キーを使用してHTTPリクエストを送信することは、絶対に良い考えではありません。この設計では、ページにアクセスするすべての人にNational Park Service APIキーが公開されます。これは確かに危険です。

最初の解決策（ax APIのデフォルトヘッダーへの構成APIキー）は問題ありません。私は自分のAPIキーとあなたのURLで試しましたが、応答コードは200 OKです。

2番目のソリューションでは、configオブジェクトをaxiosステートメントのheadersフィールドとして使用する必要があります。コードは次のようになります。

axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', {headers: config})
4
shaochuancs