У меня включена связь между источниками на моем Node.js сервере, чтобы мое приложение Vue могло получить доступ к своему API из источника, отличного от источника, в котором обслуживаются ресурсы stati c. Это делается с использованием следующего кода в Node.js:
res.setHeader('Access-Control-Allow-Origin', '*');
вместе со следующим кодом JavaScript в Vue.:
fetch(url);
Это работало нормально, пока я не представил Аутентификация на основе HTTP-заголовка. С такой аутентификацией код JavaScript в Vue был изменен с приведенного выше на:
fetch(url, {headers: {'Authorization': bearer}});
После ввода заголовка авторизации браузер начал получать следующую ошибку при попытке доступа к API:
Доступ к выборке по адресу 'https://localhost: 8001 / article' из источника http://localhost: 8080 'заблокирован политикой CORS: ответ на предполетный запрос не проходит проверку контроля доступа : Заголовок Access-Control-Allow-Origin отсутствует в запрошенном ресурсе. Если непрозрачный ответ соответствует вашим потребностям, установите режим запроса на 'no-cors', чтобы получить ресурс с отключенным CORS.
Таким образом, может показаться, что введение заголовка авторизации HTTP приводит к предполетным запросам которые не прошли предполетную проверку. Это мнение подтверждается документами Mozilla:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Origin
Для запросов без учетных данных , буквальное значение «*» может быть указано как подстановочный знак; значение указывает браузерам разрешить запрос кода из любого источника для доступа к ресурсу. Попытка использовать подстановочный знак с учетными данными приведет к ошибке.
Значит ли это, что аутентификация на основе HTTP-заголовка просто не может быть реализована в сценарии, где запросы выполняются из разных источников?
Точнее, как я могу реализовать авторизацию на основе HTTP-заголовка в моем сценарии?