如何在基本身份验证保护后面使用 Angular？

Question

我们有一个在 Apache 和 nginx 上运行的 Angular 8 应用程序。我们使用带有.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 的内部加载机制。

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

Answer 1

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

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

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