Как использовать Angular за защитой Basic Auth? - PullRequest
Новая
       61

Как использовать Angular за защитой Basic Auth?

0 голосов
/ 08 октября 2019

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

К сожалению, приложение не загружается из-за запросов к серверу, которые заблокированы Basic Auth, и 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 Ответ

1 голос
/ 08 октября 2019

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

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

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

...