我无法执行需要使用 axios 设置 header 的请求

Question

我正在尝试从外部 API（来自 Mashape）获取一些数据，这需要特定的 header 来设置 API 键。

使用 jQuery 一切正常：

$.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");
    }
});

但是，当我尝试使用 axios 为 React 应用程序执行相同的请求时，出现 404 错误：

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

有什么我想念的吗？谢谢

Answer 1

终于明白了

我们需要在使用 axios.defaults.headers.common['header_name'] = "API_KEY"; 的请求之前设置 header :

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

Answer 2

也尝试这样做而不设置默认值：

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) 中使用了不同的 header 键。也许这也与 404 错误有关？

Answer 3

我有更好的方法来解决这个问题。

您只需要像下面这样从 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));

我无法执行需要使用 axios 设置 header 的请求

I can't do a request that needs to set a header with axios

javascript

api

http-headers

axios