Как отправить заголовок авторизации с помощью 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}` } });

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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
    }
  );

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 ()

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

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

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

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

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