在 axios 中设置授权头

IT技术 http reactjs get http-status-code-401 axios
2021-03-23 21:30:41

我一直在尝试使用 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 请求时，它工作，我在密钥字段中输入授权，在值字段中输入我的 API 密钥。

谢谢你。

1个回答

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

National Park Service API 不应该要求AuthorizationOPTIONS 请求的标头，但确实如此。无论如何，有一个解决方法：在您自己的后端进行转发，接受来自浏览器的 HTTP 请求，在后端从https://developer.nps.gov检索数据，最后将其返回给浏览器。

实际上，从浏览器发送带有第三方授权密钥的 HTTP 请求绝对不是一个好主意——这种设计会将您的 National Park Service API 密钥暴露给访问该页面的每个人，这当然是一件危险的事情。

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

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

axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', {headers: config})
顺便说一句，我在 Node.js 环境中使用 axios，这就是我没有遇到 CORS 问题的原因。
2021-05-26 21:30:41
localhost/:1 XMLHttpRequest cannot load https://developer.nps.gov/api/v0/parks?parkCode=yell. Response for preflight has invalid HTTP status code 401
2021-05-27 21:30:41
谢谢您的帮助。我做了更多的研究，看起来失败的原因是浏览器发送了一个没有授权标头的 OPTIONS 预检请求。这会返回 401，因此不会执行 GET 请求。但是，我一直无法找到解决此问题的方法。我在控制台中得到以下信息：OPTIONS https://developer.nps.gov/api/v0/parks?parkCode=yell 401 (OK)
2021-05-31 21:30:41
谢谢！！有用！我真的很感谢你的帮助。
2021-06-12 21:30:41
啊，那是因为所有自定义 HTTP 标头都将从 CORS OPTIONS 请求中排除。我会更新我的答案以包含解决方法。
2021-06-20 21:30:41
其它你可能感兴趣的问题
上一篇react这是未定义的 下一篇Firebase - 预检响应中的 Access-Control-Allow-Headers 不允许请求标头字段 x-firebase-gmpid