在 axios 中设置权限 header

Question

我一直在尝试使用 axios 向国家公园管理局 API 发出 GET 请求，并尝试了多种方法将请求 header 中的 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);
});

并且 return 都是 401。当我在 Postman 中发送 GET 请求时，它会起作用，我在键字段中输入授权，在值字段中输入 API 键。

谢谢。

Answer 1

此问题是浏览器CORS OPTIONS请求引起的，与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

国家公园管理局 API 不应该要求 Authorization header 用于 OPTIONS 请求，但它确实如此。无论如何，有一个解决方法：在你自己的后端做一个forward-route，接受来自浏览器的HTTP请求，在后端从https://developer.nps.gov检索数据，最后return到浏览器。

实际上，从浏览器发送带有第三方授权密钥的 HTTP 请求绝对不是一个好主意 -- 这种设计会将您的国家公园服务 API 密钥暴露给访问该页面的每个人，这当然是一个危险的东西。

您的第一个解决方案（将 API 键配置为 axios 默认值 headers）是可以的。我尝试使用我自己的 API 密钥和您的 URL，响应代码是 200 OK。

对于第二种解决方案，axios语句中应该使用config object作为headers字段。代码将是：

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

在 axios 中设置权限 header

Setting authorization header in axios

get

http

http-status-code-401

reactjs

axios