Установка заголовка авторизации в axios

Я пытался сделать запрос GET к API службы национальных парков с помощью axios и пробовал несколько способов установить свой ключ 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. Он работает, когда я отправляю запрос GET в Postman, где я ввожу авторизацию в поле ключа, а свой ключ API в поле значения.

Спасибо.


reactjs http get axios http-status-code-401
person jcarapia    schedule 25.03.2017    source источник

Ответы (1)


arrow_upward
7
arrow_downward

Эта проблема вызвана запросом CORS OPTIONS в браузере, который не имеет ничего общего с axios. https://developer.nps.gov требует заголовка Authorization во всех HTTP-запросах, включая ОПЦИИ. Однако все настраиваемые заголовки HTTP будут исключены из ОПЦИЙ, см. https://www.w3.org/TR/cors/#cross-origin-request-with-preflight-0

API Службы национальных парков не должен требовать заголовок Authorization для запроса OPTIONS, но он требует. В любом случае, есть обходной путь: проложите прямой маршрут на своем собственном сервере, примите HTTP-запрос от браузера, получите данные с https://developer.nps.gov в серверной части и, наконец, верните его в браузер.

На самом деле, отправлять HTTP-запрос со сторонним ключом авторизации из браузера - определенно не лучшая идея - при таком дизайне ваш ключ API Службы национальных парков будет доступен всем, кто посещает страницу, что, безусловно, опасно.

Ваше первое решение (ключ API конфигурации для заголовков по умолчанию axios) в порядке. Я пробовал использовать свой собственный ключ API и ваш URL, код ответа - 200 OK.

Для второго решения объект config должен использоваться как поле headers в операторе axios. Код будет таким:

axios.get('https://developer.nps.gov/api/v0/parks?parkCode=yell', {headers: config})
person shaochuancs    schedule 27.03.2017
comment
Спасибо за помощь. Я провел немного больше исследований, и оказалось, что причина сбоя связана с тем, что браузер отправляет предварительный запрос OPTIONS без заголовка авторизации. Это возвращается как 401, и поэтому запрос GET не выполняется. Однако я не смог найти способ обойти это. Я получаю в консоли следующее: OPTIONS https://developer.nps.gov/api/v0/parks?parkCode=yell 401 (OK) - person jcarapia; 28.03.2017
comment
ах, потому что все настраиваемые заголовки HTTP будут исключены из запроса CORS OPTIONS. Я обновлю свой ответ, чтобы включить обходной путь. - person shaochuancs; 28.03.2017
comment
Кстати, я использовал axios в среде Node.js, поэтому я не столкнулся с проблемой CORS. - person shaochuancs; 28.03.2017
comment
Спасибо!! Оно работает! Я действительно ценю твою помощь. - person jcarapia; 29.03.2017