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

问题描述

我们有一个可在Apache和nginx上运行的Angular 8应用程序.我们使用带有 .htaccess 和 .htpasswd 的Basic Auth保护该应用程序.

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.

不幸的是，由于对服务器的请求被基本身份验证阻止，因此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.

我们如何使它工作?

推荐答案

问题不在您的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屋！