问题描述
我一直试图使用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密钥。
谢谢。
这个问题是由CORS OPTIONS在浏览器中请求，这与axios无关。 要求授权所有HTTP请求中的头部，包括OPTIONS。然而，所有自定义的HTTP标题将被从OPTIONS中排除，参考
国家Park服务API不应该要求 Authorization 标头用于OPTIONS请求，但它确实如此。无论如何，有一个解决方法：在自己的后端建立一个前进路线，接受来自浏览器的HTTP请求，从在后端，并最终返回给浏览器。实际上，从浏览器发送带有第三方授权密钥的HTTP请求绝对不是一个好主意 - 此设计将向访问该网站的所有人公开您的国家公园服务API密钥页面，这肯定是一个危险的东西。
你的第一个解决方案（configios API的axios默认头文件）是OK的。我尝试了使用自己的API密钥和URL，响应代码为200.
对于第二种解决方案， config 对象应该在axios语句中用作标题字段。代码是：
axios.get（'https://developer.nps.gov/api/v0/parks？ parkCode = yell'，{headers：config}）
I have been trying to make a GET request to the National Park Service API with axios and have tried several ways to set my API key in the request header to no avail. Any assistance will be greatly appreciated.
I have tried:
axios.defaults.headers.common['Authorization'] = "MY-API-KEY";
axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell')
.then((resp) => {
console.dir(resp);
});
and
let config = {'Authorization': 'MY-API-KEY'};
axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', config)
.then((resp) => {
console.dir(resp);
});
and both return a 401.It works when I send the GET request in Postman, where I enter Authorization in the key field, and my API key in the value field.
Thank you.
This issue is caused by CORS OPTIONS request in browser, which has nothing to do with axios. https://developer.nps.gov requires Authorization header in all HTTP request, including OPTIONS. However, all custom HTTP headers will be excluded from OPTIONS, refer to https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0
The National Park Service API should not require Authorization header for OPTIONS request, but it does. Anyway, there is a workaround: make a forward-route in your own backend, accept the HTTP request from browser, retrieve data from https://developer.nps.gov in backend, and finally return it to browser.
Actually, send HTTP request with third party authorization key from browser is definitely not a good idea -- This design will expose your National Park Service API key to everyone who visit the page, which is certainly a dangerous thing.
Your first solution (config API key to axios default headers) is OK. I tried with my own API key and your URL, the response code is 200 OK.
For the second solution, the config object should be used as headers field in axios statement. The code would be:
axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', {headers: config})
这篇关于在axios中设置授权标题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！