如何在基本身份验证保护背后使用 Angular? [英] How to use Angular behind Basic Auth protection?

问题描述

我们有一个在 Apache 和 nginx 上运行的 Angular 8 应用程序.我们使用带有 .htaccess 和 .htpasswd 的基本身份验证来保护此应用程序.

We have an Angular 8 Application that runs on an Apache and on nginx. We protect this application using Basic Auth with .htaccess and .htpasswd.

不幸的是，由于对服务器的请求被 Basic Auth 阻止并且 Angular 无法加载这些文件，因此应用无法加载:

Unfortunately the app won't load due to requests to the server that are blocked by the Basic Auth and Angular can't load these files:

阻止 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 行)

Blocked http://root/polyfills-es2015.js from asking for credentials because it is a cross-origin request.
Blocked http://root/runtime-es2015.js from asking for credentials because it is a cross-origin request.
Failed to load resource: the server responded with a status of 401 (Authorization Required) (runtime-es2015.js, line 0)
Blocked http://root/styles-es2015.js from asking for credentials because it is a cross-origin request.
Failed to load resource: the server responded with a status of 401 (Authorization Required) (styles-es2015.js, line 0)
Blocked http://root/vendor-es2015.js from asking for credentials because it is a cross-origin request. Blocked http://root/main-es2015.js from asking for credentials because it is a cross-origin request.
Failed to load resource: the server responded with a status of 401 (Authorization Required) (vendor-es2015.js, line 0)
Failed to load resource: the server responded with a status of 401 (Authorization Required) (main-es2015.js, line 0)
Failed to load resource: the server responded with a status of 401 (Authorization Required) (polyfills-es2015.js, line 0)

如果我们删除对 .htpasswd 的引用，应用程序将按预期运行.

If we remove the reference to the .htpasswd the application runs as expected.

我尝试使用自定义 HTTP 拦截器:

I tried to use a custom HTTP Interceptor:

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 内部加载机制.

But it seems, that this is not used for Angulars internal loading mechanism.

我们怎样才能让它发挥作用?

How can we get this to work?

推荐答案

问题不在于您的 Angular 代码，而在于后端配置.

The issue is not located in your Angular code but rather in the backend configuration.

您需要在后端启用 CORS(跨域请求).目前，您的后端不允许请求通过，以防止任何网站发送请求(防止跨站点脚本攻击).

You need to enable CORS (Cross-origin requests) in your backend. Right now, your backend does not allow the requests to go through to prevent any website to send a request (prevents from cross-site scripting attacks).

因此，您应该查看 nginx 和 Apache 如何启用 CORS.这个网站似乎给出了一个简短的 &很好的介绍:https://enable-cors.org/server_apache.html.但请注意限制允许的来源，以免向潜在攻击者敞开大门.

Thus, you should look in nginx and Apache how to enable CORS. This website seems to give a short & good introduction: https://enable-cors.org/server_apache.html. Beware to restrict the allowed origins though, so you don't leave open doors to potential attackers.

这篇关于如何在基本身份验证保护背后使用 Angular?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！