Question

我一直在尝试使用axios向国家公园服务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密钥。

谢谢。

Answer 1

此问题是由浏览器中的CORS OPTIONS请求引起的，该请求与axios无关。 https://developer.nps.gov在所有HTTP请求中都需要Authorization标头，包括OPTIONS。但是，所有自定义HTTP标头都将从OPTIONS中排除，请参阅https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0

国家公园服务API不应要求Authorization标题用于OPTIONS请求，但确实如此。无论如何，有一个解决方法：在您自己的后端创建前向路由，接受来自浏览器的HTTP请求，从后端的https://developer.nps.gov检索数据，最后将其返回到浏览器。

实际上，从浏览器发送带有第三方授权密钥的HTTP请求绝对不是一个好主意 - 这个设计会向访问该页面的每个人公开您的国家公园服务API密钥，这肯定是一件危险的事情。

您的第一个解决方案（axios默认标头的配置API密钥）没问题。我尝试使用自己的API密钥和您的URL，响应代码为200 OK。

对于第二个解决方案，config对象应该用作axios语句中的headers字段。代码是：

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

在axios中设置授权标头

1 个答案: