如何在负载均衡器后面设置 Angular 和 OpenId

Posted 2023-03-03

【中文标题】如何在负载均衡器后面设置 Angular 和 OpenId

【英文标题】：How to setup Angular and OpenId behind load balancer

【发布时间】：2018-04-20 14:00:05

【问题描述】：

我正在尝试使用 OpenId 在我的 Angular/.net Core 2.0 应用程序中使用跨域身份验证。

为此，我使用了 angular-auth-oidc-client 包。身份验证 API 位于负载平衡器后面，我目前在浏览器中遇到错误。

无法加载https://xyz//.well-known/openid-configuration：请求的资源上不存在“Access-Control-Allow-Origin”标头。因此，Origin 'http://localhost:5002' 不允许访问。响应的 HTTP 状态代码为 404。

如何在 Angular 4 中添加等效的 ForwardedHeadersOptions (.net core)？

Angular 是否有其他软件包提供设置 ForwardedHeaders 的选项？

【参考方案1】：

我们有一个Angular 4 前端托管在AWS S3 bucket 上，有一个AWS elastic load balancer 后面有多个EC2 servers，每个pm2 服务在nginx 代理后面运行。

来自前端的 REST 请求到达服务器时没有 CORS 问题：

没有 AWS 弹性负载均衡器，直接连接到 EC2 服务器

REST 请求因前端的 CORS 错误而中断，无法到达服务器：

使用 AWS 弹性负载均衡器，而不是直接连接到 EC2 服务器

虽然我们还没有成功，但是到目前为止我们已经尝试过these are the stuff (as per @agentspacecake)：

S3 bucket 中允许使用 CORS，例如 config - 完成 在后端使用 CORS node module 允许 CORS - 完成 nginx proxy using the CORS headers 中允许使用 CORS - 完成 在负载平衡器的前端允许 CORS - 未完成

根据我目前的研究：

每个@Max@AWS，我们need to whitelist the "Origin" header 根据@Brian@AWS，我们将want to whitelist the "Origin" and any other headers you'd like to forward 这是一个 bug in the past，尤其适用于 chrome 根据@Arun@AWS，requests needs to contain the headers which are expected to return 不确定browser caching could surface the CORS issue @hescar，我们也可以试试adding a 'Origin' header 看起来，we shall not use * wildcard AWS 工作人员说ELB doesn't support CORS yet feature request 对 ELB CORS 的支持看起来仍然开放 docs 表示在简单/实际请求中不允许使用 JSON Content-Type

请求仅使用 GET 或 POST HTTP 方法。如果使用 POST 方法，那么 Content-Type 只能是以下之一：application/x-www-form-urlencoded、multipart/form-data 或 text/plain。

希望这在一定程度上有所帮助。