Отказано в разрешении 401 при отправке запроса axios между локальными хостами (React и Django)

Я установил бэкенд django и фронтенд React. Приложение dango рендерит index.html, где находится готовый к производству JS, созданный с помощью react.

Но при локальной разработке я разрабатываю react frontend на своем localserver:3000. Теперь я пытаюсь получить данные из бэкенда django, но продолжаю получать ошибку 401 Permission. Я знаю, что проблема в том, что запрос приходит с разных хостов, но я не знаю, как ее решить.

Мои backend apis используют аутентификацию токена, но даже если я отправляю токен предъявителя в заголовках, я все равно получаю ту же ошибку:

chrome dev tools response

Мой код для запроса прост:

axios
    .get(`http://localhost:8000/path/to/data/`, {
        headers: {
            'Content-type': 'application/json',
            Accept: 'application/json',
            Authorization: `Bearer ${'here is my token'}`,
        },
    })
    .then((response) => {
        console.log(response);
    })
    .catch((error) => {
        console.log(error);
    });

Когда мое приложение react делает этот пакет готовым к производству и выполняет его на localhost:8000, ошибки разрешения нет, но мне нужно, чтобы он работал с localhost:3000, потому что именно там я разрабатываю свое приложение.

Помощь будет очень признательна. Заранее спасибо

Поскольку моя rest-конфигурация реализована с помощью JWT-Token, мне нужно было отправлять запросы с Authorization: JWT ${'here is my token'}, вместо Authorization: Bearer ${'here is my token'}. Всего три буквы, но это решило проблему :). Спасибо antpngl92 за диагностику проблемы вместе со мной.

Вернуться на верх