Question

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

不幸的是，由于对服务器的请求被基本身份验证阻止，因此Angular无法加载这些文件：

http://root/polyfills-es2015.js由于是跨域请求而被禁止提供凭据。
  由于http://root/runtime-es2015.js是跨域请求，因此阻止了http://root/styles-es2015.js的请求。
  加载资源失败：服务器响应状态为401（需要授权）（runtime-es2015.js，第0行）
  由于http://root/vendor-es2015.js是跨域请求，因此阻止了http://root/main-es2015.js的请求。
  加载资源失败：服务器响应状态为401（需要授权）（styles-es2015.js，第0行）
  https://dotnet.microsoft.com/download/dotnet-core/3.0由于是跨域请求而被阻止请求凭据。   由于https://www.tutorialsteacher.com/core/net-core-command-line-interface是跨域请求，因此阻止了{{3}}的请求。
  无法加载资源：服务器的响应状态为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。但是要当心限制允许的来源，因此您不要向潜在的攻击者敞开大门。

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

1 个答案: