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

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);
}

但这似乎不适用于棱角内部加载机制。

我们怎样才能让这个工作？

Answer 1

该问题不在Angular代码中，而是在后端配置中。

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

因此，您应该查看nginx和Apache如何启用CORS。这个网站似乎给了一个简短的