Как передать Basic Authorization в Axios и исправить ошибки CORS

При разработке React-приложений часто возникает задача авторизации через REST API с использованием Basic Authorization. Разработчики сталкиваются с проблемами: заголовки не передаются, браузер блокирует запросы из-за CORS, или сервер не распознаёт учётные данные. В статье разберём правильную передачу авторизационных данных в Axios, настройку сервера Apache и типичные ошибки.

Что такое Basic Authorization и как он работает

Basic Authentication - это простой механизм HTTP-авторизации, где имя пользователя и пароль кодируются в base64 и передаются в заголовке Authorization. Формат: Basic base64(username:password). Например, для пары alex:hello закодированная строка будет YWxleDpoZWxsbw==.

Клиент (браузер) отправляет этот заголовок с каждым запросом. Сервер Apache, если настроен через .htaccess, проверяет валидность и предоставляет доступ.

Правильный способ передачи Basic Auth в Axios

Способ 1: Встроенный параметр auth

Axios поддерживает объект auth, который автоматически кодирует учётные данные в base64 и добавляет заголовок Authorization. Пример корректного кода:

const fetchData = async () => {
  try {
    const { data } = await axios.get('http://restapi/api/product/read.php', {
      auth: {
        username: 'alex',
        password: 'hello'
      }
    });
    console.log(data);
  } catch (error) {
    console.error('Ошибка:', error);
  }
};

Важно: добавьте блок try/catch - это поможет отловить ошибки CORS или неверных данных.

Способ 2: Ручное добавление заголовка

Если нужно контролировать заголовок вручную, используйте предварительно закодированную строку base64. Пример:

const base64Credentials = btoa('alex:hello');
const instance = axios.create({
  baseURL: 'http://restapi',
  headers: {
    'Authorization': `Basic ${base64Credentials}`
  }
});

export const getData = async () => {
  try {
    const res = await instance.get('/api/product/read.php');
    console.log(res);
  } catch (error) {
    console.error(error);
  }
};

Обратите внимание: btoa() работает в браузере; на Node.js используйте Buffer.from('alex:hello').toString('base64').

Почему возникает ошибка CORS и как её исправить

Ошибка CORS (Cross-Origin Resource Sharing) появляется, когда браузер блокирует запросы с одного домена на другой. Даже если в .htaccess указан Header set Access-Control-Allow-Origin "*", при включённой Basic Auth Apache может не обрабатывать CORS-заголовки до проверки авторизации.

Настройка сервера Apache

Чтобы CORS работал с авторизацией, добавьте в .htaccess следующие строки:

Header always set Access-Control-Allow-Origin "*"
Header always set Access-Control-Allow-Methods "GET, POST, OPTIONS"
Header always set Access-Control-Allow-Headers "Authorization, Content-Type"

RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

AuthType Basic
AuthName "Access to the staging site"
AuthUserFile /var/www/restapi/.htpasswd
Require valid-user

Директива Header always set гарантирует отправку CORS-заголовков даже при авторизации. Правило для OPTIONS запросов (preflight) возвращает код 200 без проверки пароля, что критично для браузеров.

Тестирование и отладка

• Проверьте кодировку base64: используйте онлайн-декодер, чтобы убедиться, что строка YWxleDpoZWxsbw== соответствует alex:hello.
• Используйте инструменты разработчика: вкладка Network покажет, отправляется ли заголовок Authorization и какие заголовки возвращает сервер.
• Отключите авторизацию временно: если без неё запросы работают, проблема именно в настройках Apache или CORS.
• Проверьте .htpasswd: файл должен содержать корректный хеш пароля (например, сгенерированный через htpasswd).

Распространённые ошибки

Ошибка: "Access to XMLHttpRequest has been blocked by CORS policy"

Решение: убедитесь, что сервер отправляет заголовок Access-Control-Allow-Origin и обрабатывает OPTIONS-запросы. Если используете прокси (например, в CRA), настройте его в package.json.

Ошибка: "401 Unauthorized"

Решение: проверьте правильность имени пользователя и пароля в файле .htpasswd. Убедитесь, что в запросе передаётся заголовок Authorization: Basic ....

Заключение

Передача Basic Authorization в Axios не требует ручного кодирования base64 - библиотека делает это автоматически при использовании параметра auth. Главная проблема - CORS, который решается настройкой сервера Apache с обработкой preflight-запросов и принудительной отправкой заголовков. Следуя нашим инструкциям, вы сможете настроить авторизацию и избежать типичных ошибок.