在axios中设置授权标头

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

谢谢。

回答:

此问题是由浏览器中的CORS

OPTIONS请求引起的,与axios无关。https://developer.nps.gov要求Authorization所有HTTP请求(包括OPTIONS)中的标头。但是,所有自定义HTTP标头都将从OPTIONS中排除,请参阅https://www.w3.org/TR/cors/#cross-

origin-request-with-preflight-0

国家公园服务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})

以上是 在axios中设置授权标头 的全部内容, 来源链接: utcz.com/qa/411731.html

回到顶部