Как отправить заголовок авторизации с помощью axios

Как я могу отправить заголовок аутентификации с помощью токена через axios.js? Я пробовал несколько вещей без успеха, например:

const header = 'Authorization: Bearer ${token}';
return axios.get(URLConstants.USER_URL, { headers: { header } });

Дает мне эту ошибку:

XMLHttpRequest cannot load http://localhost:8000/accounts/user/. Request header field header is not allowed by Access-Control-Allow-Headers in preflight response.

Мне удалось заставить его работать, установив глобальный дефолт, но я предполагаю, что это не лучшая идея для одного запроса:

axios.defaults.headers.common['Authorization'] = 'Bearer ${token}';

Обновить :

Ответ Коула помог мне найти проблему. Я использую промежуточное ПО django-cors-headers, которое по умолчанию обрабатывает заголовок авторизации.

Но я смог понять сообщение об ошибке и исправил ошибку в моем коде запроса axios, который должен выглядеть так

return axios.get(URLConstants.USER_URL, { headers: { Authorization: 'Bearer ${data.token}' } });

Ответ 1

На непростых http-запросах ваш браузер сначала отправит "предполетный" запрос (запрос метода OPTIONS), чтобы определить, какой рассматриваемый сайт считает безопасную информацию для отправки (см. Здесь спецификацию политики перекрестного происхождения об этом). Одним из соответствующих заголовков, которые хост может установить в ответе перед Access-Control-Allow-Headers является Access-Control-Allow-Headers. Если какой-либо из заголовков, которые вы хотите отправить, не был указан ни в списке спецификаций заголовков в белом списке, ни в ответе предварительной проверки сервера, то браузер откажется отправить ваш запрос.

В вашем случае вы пытаетесь отправить заголовок Authorization, который не считается одним из универсально безопасных для отправки заголовков. Затем браузер отправляет предварительный запрос, чтобы спросить сервер, должен ли он отправлять этот заголовок. Сервер либо отправляет пустой заголовок Access-Control-Allow-Headers (который считается означающим "не разрешать дополнительные заголовки"), либо отправляет заголовок, который не включает Authorization в своем списке разрешенных заголовков. Из-за этого браузер не собирается отправлять ваш запрос и вместо этого решает уведомить вас, выдав ошибку.

Любой обходной путь Javascript, который вы обнаружите, который позволяет вам отправлять этот запрос в любом случае, должен рассматриваться как ошибка, поскольку он противоречит политике запросов перекрестного источника, которую ваш браузер пытается применить для вашей собственной безопасности.

tl; dr - Если вы хотите отправлять заголовки Authorization, лучше настроить ваш сервер, чтобы разрешить это. Настройте сервер так, чтобы он отвечал на запрос OPTIONS по этому URL с Access-Control-Allow-Headers: Authorization.

Ответ 2

Попробуй это:

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );

Ответ 3

Это сработало для меня:

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : 'Bearer ${tokenStr}'} });

Ответ 4

Вместо добавления его к каждому запросу вы можете просто добавить его как конфигурацию по умолчанию, например.

axios.defaults.headers.common['Authorization'] = 'Bearer ${access_token}'

Ответ 5

Вы почти правы, просто настройте свой код таким образом

const header = Authorization: 'Bearer-${token}';
return axios.get(URLConstants.USER_URL, { headers: { header } });

обратите внимание, где я размещаю обратные ссылки, я добавил "-" после Bearer, вы можете опустить, если будете уверены, что будете обрабатывать на стороне сервера

Ответ 6

Вместо вызова функции axios.get Использование:

axios({ method: 'get', url: 'your URL', headers: { Authorization: 'Bearer ${token}' } })

Ответ 7

res.setHeader('Access-Control-Allow-Headers',
            'Access-Control-Allow-Headers, Origin,OPTIONS,Accept,Authorization, X-Requested-With, Content-Type, Access-Control-Request-Method, Access-Control-Request-Headers');

Цитата: вы должны добавить ОПЦИИ и Авторизацию в setHeader()

это изменение исправило мою проблему, просто попробуйте!