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

99

Как я могу отправить заголовок аутентификации с токеном через 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}` } });
foobar
источник

Ответы:

89

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

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

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

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

Коул Эриксон
источник
11
Спасибо, Коул! Ваш ответ помог мне найти проблему. Я использую промежуточное ПО django-cors-headers, которое по умолчанию уже обрабатывает заголовок авторизации. Но я смог понять сообщение об ошибке и исправил ошибку в моем коде запроса axios, который должен выглядеть так return axios.get(URLConstants.USER_URL, { headers: { Authorization: `Bearer ${data.token}` } });
foobar
1
Пожалуйста! Я постоянно сталкиваюсь с подобными проблемами со своими API. Просто рад, что смог помочь вам понять процесс, через который он должен пройти.
Коул Эриксон
44

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

axios.get(
    url,
    {headers: {
        "name" : "value"
      }
    }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );
Матия Жупанчич
источник
1
Таким образом, имя заголовка будет «Access-Control-Allow-Headers», а значение - это то, что вы хотите.
Матия
Итак, вы имеете в виду, что у меня будет что-то вроде: axios.get (url, {headers: {'Access-Control-Allow-Headers': 'Bearer <my token>'}})? Это не работает.
foobar
11
Я считаю, что это должно быть {'Authorization': 'Bearer <my token>'}
Джон Хардинг
38

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

let webApiUrl = 'example.com/getStuff';
let tokenStr = 'xxyyzz';
axios.get(webApiUrl, { headers: {"Authorization" : `Bearer ${tokenStr}`} });
sean717
источник
2
В ответе меньше деталей по сравнению с приведенным выше, но это ответ, который ищут все, когда ищут в Google.
Черная Мамба
33

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

axios.defaults.headers.common['Authorization'] = `Bearer ${access_token}` 
Ханаан Этаи
источник
как разместить эту конфигурацию? в корне (index.js, App.js)? Или в отдельном файле?
ibubi
8

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

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

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

Джаласем
источник
6
Обычно (по спецификации) -между схемой аутентификации и токеном есть пробел, а не тире ( ). Я никогда не видел, чтобы какой-либо тип сервера требовал тире, как вы показали, и большинство, если не все, отправили бы обратно ошибку, если бы она была предоставлена.
Раман
6

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

axios({ method: 'get', url: 'your URL', headers: { Authorization: `Bearer ${token}` } })
Дипак
источник
1

Вы можете попробовать это.

axios.get(
    url,
    {headers: {
            "Access-Control-Allow-Origin" : "*",
            "Content-type": "Application/json",
            "Authorization": `Bearer ${your-token}`
            }   
        }
  )
  .then((response) => {
      var response = response.data;
    },
    (error) => {
      var status = error.response.status
    }
  );
Ашиш
источник
0
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 ()

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

МЕСДУР
источник
0

Установите corsпромежуточное ПО. Мы пытались решить это с помощью собственного кода, но все попытки с треском провалились.

Это заставило его работать:

cors = require('cors')
app.use(cors());

Исходная ссылка

звон колокола
источник
1
это для узловых серверов, а не для axios
Марк Гарсия,
Пользователи, найдя этот вопрос, могут найти этот ответ полезным. Этот вопрос можно использовать для работы с серверами узлов в сценариях использования и напоминанием о том, что cors может решить их проблему, или для перемещения проверки заголовка бэкэнда под приведенный выше код. Помог избавить меня от разочарования, Спасибо, звоночек.
DORRITO,