gpt4 book ai didi

http - 在 axios 中设置授权 header

转载 作者:可可西里 更新时间:2023-11-01 15:21:19 27 4
gpt4 key购买 nike

我一直在尝试使用 axios 向国家公园服务 API 发出 GET 请求,并尝试了多种方法在请求 header 中设置我的 API key ,但均无济于事。任何帮助将不胜感激。

我试过:

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 字段中输入授权,在值字段中输入我的 API key 。

谢谢。

最佳答案

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

国家公园服务 API 不应该为 OPTIONS 请求要求 Authorization header ,但它确实如此。无论如何,有一个解决方法:在你自己的后端做一个转发路由,接受来自浏览器的 HTTP 请求,从 https://developer.nps.gov 检索数据。在后端,最后返回给浏览器。

实际上,从浏览器发送带有第三方授权 key 的 HTTP 请求绝对不是一个好主意——这种设计会将您的国家公园服务 API key 暴露给访问该页面的每个人,这无疑是一件危险的事情。


您的第一个解决方案(axios 默认 header 的配置 API key )没问题。我尝试使用我自己的 API key 和您的 URL,响应代码是 200 OK。

对于第二种解决方案,config 对象应该用作axios 语句中的headers 字段。代码将是:

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

关于http - 在 axios 中设置授权 header ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/43014034/

27 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com