在axios中设置授权头

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请求时，它能够工作，我在key字段中输入Authorization，在value字段中输入我的API密钥。

谢谢。

- jcarapia

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不应该要求OPTIONS请求包含Authorization头信息，但它确实这样做了。无论如何，有一个解决方法：在您自己的后端中创建一个转发路由，接受来自浏览器的HTTP请求，在后端从https://developer.nps.gov检索数据，并最终将其返回给浏览器。

实际上，使用第三方授权密钥从浏览器发送HTTP请求绝对不是一个好主意——这种设计会向访问页面的每个人公开您的国家公园管理局API密钥，这显然是一件危险的事情。

---

您的第一个解决方案（将API密钥配置到axios默认头信息中）是可以的。我使用了自己的API密钥和您的URL进行了尝试，响应代码是200 OK。

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

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

- shaochuancs

---

谢谢你的帮助。我进行了更多的研究，发现失败的原因是浏览器发送了一个没有授权头的OPTIONS预检请求。这会返回401，因此GET请求不会执行。然而，我还没有找到解决这个问题的方法。在控制台中，我得到了以下信息：OPTIONS https://developer.nps.gov/api/v0/parks?parkCode=yell 401 (OK)。 - jcarapia

localhost/:1 XMLHttpRequest cannot load https://developer.nps.gov/api/v0/parks?parkCode=yell. Response for preflight has invalid HTTP status code 401 - jcarapia

啊，那是因为所有自定义的HTTP头都将被排除在CORS OPTIONS请求之外。我会更新我的答案，包括解决方法。 - shaochuancs

顺便提一下，我在Node.js环境中使用axios，这就是为什么我没有遇到CORS问题的原因。 - shaochuancs

谢谢！它可以工作了！我非常感激你的帮助。 - jcarapia