Исправляем ошибку 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 })
// Продолжайте выполнение своей миссии здесь.
Полезные материалы
[... Оригинальный материал был вдохновлен первоначальными черновиками ...]