У нас есть приложение Angular 8, которое работает на Apache и nginx. Мы защищаем это приложение, используя базовую аутентификацию с .htaccess и .htpasswd.

К сожалению, приложение не загружается из-за запросов к серверу, заблокированных базовой аутентификацией, и Angular не может загрузить эти файлы:

Заблокирован http: //root/polyfills-es2015.js от запроса учетных данных, поскольку это перекрестный запрос происхождения.
Заблокирован http: //root/runtime-es2015.js от запроса учетных данных, поскольку это перекрестный запрос происхождения.
Не удалось загрузить ресурс: сервер ответил статусом 401 (требуется авторизация) (runtime-es2015.js, строка 0)
Заблокирован http: //root/styles-es2015.js от запроса учетных данных, потому что это перекрестный запрос происхождения.
Не удалось загрузить ресурс: сервер ответил статусом 401 (требуется авторизация) (styles-es2015.js, строка 0)
Заблокирован http: //root/vendor-es2015.js от запроса учетных данных, поскольку это перекрестный запрос происхождения. Заблокирован http: //root/main-es2015.js от запроса учетных данных, поскольку это перекрестный запрос происхождения.
Не удалось загрузить ресурс: сервер ответил статусом 401 (требуется авторизация) (vendor-es2015.js, строка 0)
Не удалось загрузить ресурс: сервер ответил статусом 401 (требуется авторизация) (main-es2015.js, строка 0)
Не удалось загрузить ресурс: сервер ответил статусом 401 (требуется авторизация) (polyfills-es2015.js, строка 0)

Если мы удалим ссылку на .htpasswd, приложение будет работать должным образом.

Я попытался использовать собственный HTTP-перехватчик:

intercept(req: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {
  const cloned = req.clone({
    headers: req.headers.set('Authorization', 'Basic ' + btoa('user:password'))
  });

  return next.handle(cloned);
}

Но похоже, что это не используется для внутреннего механизма загрузки Angulars.

Как мы можем заставить это работать?

1
lampshade 8 Окт 2019 в 13:23

1 ответ

Лучший ответ

Проблема не в вашем коде Angular, а в конфигурации бэкэнда.

Вам необходимо включить CORS (запросы из разных источников) в вашем бэкэнде. Прямо сейчас ваш бэкэнд не разрешает прохождение запросов, чтобы предотвратить отправку запроса любым веб-сайтом (предотвращает атаки межсайтовых сценариев).

Таким образом, вы должны посмотреть в nginx и Apache, как включить CORS. Этот веб-сайт, кажется, дает краткое и хорошее введение: https://enable-cors.org/server_apache.html. Остерегайтесь ограничивать разрешенное происхождение, чтобы не оставлять двери открытыми для потенциальных злоумышленников.

1
Qortex 8 Окт 2019 в 14:01