web-dev-qa-db-ja.com

axiosでヘッダーを設定する必要があるリクエストを実行できません

APIキーを設定するために特定のヘッダーを必要とする外部API（Mashapeから）からいくつかのデータを取得しようとしています。

JQueryを使用してすべてがOKです：

$.ajax({
    url: 'https://omgvamp-Hearthstone-v1.p.mashape.com/cardbacks',
    type: 'GET',
    data: {},
    dataType: 'json',
    success: function(data) { console.dir((data.source)); },
    error: function(err) { alert(err); },
    beforeSend: function(xhr) {
    xhr.setRequestHeader("X-Mashape-Authorization", "MY_API_KEY");
    }
});

ただし、reactアプリケーションのaxiosで同じリクエストを実行しようとすると、404エラーが発生します。

axios.get({
  url: 'https://omgvamp-Hearthstone-v1.p.mashape.com/cardbacks',
  headers: {
      "X-Mashape-Authorization": "MY_API_KEY"
   }
 })

足りないものはありますか？ありがとう。

javascriptapihttp-headersaxios
5
Mehdi Brillaud

デフォルトを設定せずに、このようにすることも試みてください。

axios.get('https://omgvamp-Hearthstone-v1.p.mashape.com/cardbacks', {
      headers: { "X-Mashape-Key": "MY_API_KEY" }
    })
      .then((resp) => {
        console.dir(resp);

      })
      .catch(err => {
        console.log(err);
      });
  }

動作するはずです。

PSまた、問題のヘッダーキー（X-Mashape-Authorization）と回答（X-Mashape-Key）が異なることも確認しました。多分それはまたどういうわけか404エラーに関連していますか？

11
Alex Alexeev

やっとわかりました。

axios.defaults.headers.common['header_name'] = "API_KEY";を使用して、リクエストの前にヘッダーを設定する必要があります。

axios.defaults.baseURL = 'https://omgvamp-Hearthstone-v1.p.mashape.com';
axios.defaults.headers.common['X-Mashape-Key'] = "API_KEY";
axios.get('/cardbacks')
    .then((resp) => {
        console.dir(resp);
    });
14
Mehdi Brillaud

私はこれを解決するためのより良い方法を得ました。

以下のようなaxiosからパラメータフォーマットを追加する必要があります。

axios({
    method: <method>,
    url: <url>,
    data: <params>,
    headers: { common: <headers> },
  })
  .then(response => {
    if (!cb) return { error: 'No callback' };
    return cb(response);
  })
  .catch((err) => cb(err.response));
4
acan12