Як надіслати заголовок авторизації з 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');

Блок-цитата: вам потрібно додати OPTIONS & Authorization до setHeader ()

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

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

Це змусило це працювати:

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

Оригінальне посилання