我试图从外部API(来自Mashape)获取一些数据,这些数据需要特定的标头来设置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为反应应用程序执行相同的请求时,我遇到了404错误:
axios.get({
url: 'https://omgvamp-hearthstone-v1.p.mashape.com/cardbacks',
headers: {
"X-Mashape-Authorization": "MY_API_KEY"
}
})

我有什么遗失的东西吗?感谢。
答案 0 :(得分:13)
我终于明白了。
我们需要使用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);
});
答案 1 :(得分:10)
如果没有设置默认值,请尝试这样做:
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错误有某种关系?
答案 2 :(得分:4)
我有更好的方法来解决这个问题。
您只需要从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));