Исправляем ошибку 401 при аутентификации fetch API

Быстрый ответ

Для реализации базовой аутентификации с использованием функции fetch, следует установить заголовок Authorization в формате Basic + btoa(имя_пользователя + ':' + пароль). Рассмотрим простой пример:

const auth = btoa('BruceWayne:ImBatman');
fetch('https://gotham.api/endpoint', { 
  headers: { 'Authorization': `Basic ${auth}` }
})
.then(res => res.json())
.then(console.log)      
.catch(console.error);

Каждому инструменту — своё место: браузер и Node.js

Если ваша работа связана с браузером, btoa отлично подойдет для создания Base64 кодированных учетных данных. В Node.js для таких же целей лучше использовать Buffer.from().

// Node.js
const auth = Buffer.from('BruceWayne:ImBatman').toString('base64');
// Браузер
const auth = btoa('BruceWayne:ImBatman');

Глубже в тонкости работы: использование credentials

Не следует игнорировать параметр credentials при использовании fetch. Если ваш запрос должен пересылать куки или данные сессии на другой домен, определите credentials как include.

fetch('https://gotham.api/endpoint', {
  credentials: 'include',
  headers: { 'Authorization': `Basic ${auth}` },
})
// Обработка результатов запроса здесь.

Порядок действий: обработка ошибок и отладка

Процесс обработки ошибок можно сравнить с борьбой Бэтмена за справедливость. Важно проверять статус ответа и адекватно реагировать на возникающие проблемы:

fetch('https://gotham.api/endpoint', {
  headers: { 'Authorization': `Basic ${auth}` },
})
.then(response => {
  if (!response.ok) throw new Error('Тревога в Готэме!');
  return response.json(); 
})
.then(data => {/* Обработку данных доверим Альфреду */})
.catch(error => console.error('Бэт-сигнал активирован!', error));

Будьте внимательны: мелкие ошибки, такие как опечатки или синтаксические недосмотры, могут существенно осложнить работу вашего fetch запроса.

Визуализация (минутка перерыва!)

Попробуем представить базовую аутентификацию с fetch как сцену из кино:

КЛИЕНТ (👤 — Бэтмен) отсылает ЗАПРОС (🚪) на получение данных:

fetch('https://api.gotham.com/criminals-list', {
  method: 'GET',
  headers: new Headers({
    'Authorization': 'Basic ' + btoa('Batman:password')  // 🗝️ — ключ доступа!
  })
});

При корректно введенном КЛЮЧЕ (🗝️) доступ разрешается (🔓), и данные становятся доступными.

Примечание: Кодирование ключа в base64 — это наш камуфляж, такой же сложный и загадочный, как бэт-пещера!

Профессиональные приемы: обработка строк, заголовков и требований сервера

Обработка не-ASCII символов

Если вам необходимо работать со спецсимволами, используйте unibtoa или полифилл для корректной работы с символами UTF-8:

function unibtoa(s) {
  return btoa(unescape(encodeURIComponent(s)));
}

const auth = unibtoa('Batman:Batcave123');

Подробнее об этом расскажет наш спикер на видео

Удовлетворение требований сервера

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

Освоение HTTP-заголовков

Работа с HTTP-заголовками становится проще с объектом Headers — незаменимым инструментом в работе с запросами:

const headers = new Headers();
headers.set('Authorization', 'Basic ' + btoa('Batman:Batcave123'));

fetch('https://gotham.api/endpoint', { headers })
// Продолжайте выполнение своей миссии здесь.

Полезные материалы

[... Оригинальный материал был вдохновлен первоначальными черновиками ...]