在 axios 中设置授权标头
Posted
技术标签:
【中文标题】在 axios 中设置授权标头【英文标题】:Setting authorization header in axios 【发布时间】:2017-08-18 05:59:41 【问题描述】:我一直在尝试使用 axios 向 National Park Service 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 密钥。
谢谢。
【问题讨论】:
【参考方案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
对于 OPTIONS 请求,国家公园服务 API 不应该需要 Authorization
标头,但它确实需要。无论如何,有一个解决方法:在你自己的后端做一个转发路由,接受来自浏览器的 HTTP 请求,在后端从https://developer.nps.gov 检索数据,最后返回给浏览器。
实际上,从浏览器发送带有第三方授权密钥的 HTTP 请求绝对不是一个好主意——这种设计会将您的 National Park Service API 密钥暴露给所有访问该页面的人,这无疑是一件危险的事情。
您的第一个解决方案(将 API 密钥配置为 axios 默认标头)是可以的。我尝试使用我自己的 API 密钥和您的 URL,响应代码为 200 OK。
对于第二种解决方案,config
对象应用作 axios 语句中的headers
字段。代码是:
axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', headers: config)
【讨论】:
感谢您的帮助。我做了更多的研究,看来失败的原因是浏览器发送了一个没有授权标头的 OPTIONS 预检请求。这会以 401 的形式返回,因此不会执行 GET 请求。但是,我一直无法找到解决此问题的方法。我在控制台中得到以下信息:OPTIONS https://developer.nps.gov/api/v0/parks?parkCode=yell 401 (OK)
localhost/:1 XMLHttpRequest cannot load https://developer.nps.gov/api/v0/parks?parkCode=yell. Response for preflight has invalid HTTP status code 401
啊,这是因为所有自定义 HTTP 标头都将从 CORS OPTIONS 请求中排除。我将更新我的答案以包含解决方法。
顺便说一句,我在Node.js环境中使用axios,所以我没有遇到CORS问题。
谢谢!!有用!非常感谢您的帮助。以上是关于在 axios 中设置授权标头的主要内容,如果未能解决你的问题,请参考以下文章