How to setup Angular and OpenId behind load balancer

Question

I'm trying to use cross domain authentication in my Angular/.net Core 2.0 app using OpenId.

for this purpose I'm using angular-auth-oidc-client package. the authentication API is behind a load balancer and I'm currently getting an error in browser .

Failed to load https://xyz//.well-known/openid-configuration: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:5002' is therefore not allowed access. The response had HTTP status code 404.

How to add equivalent of ForwardedHeadersOptions (.net core) in Angular 4?

Is there any other package for Angular which provides the option to set the ForwardedHeaders ?

Answer 1

We have an Angular 4 front end hosted on AWS S3 bucket, with an AWS elastic load balancer behind which we have multiple EC2 servers each running a pm2 service behind an nginx proxy.

The REST requests from the front end reaches the server without CORS issues:

• without the AWS elastic load balancer and directly to the EC2 server

The REST requests breaks with the CORS errors from the front end and not reaches the server:

• with the AWS elastic load balancer and not directly to the EC2 server

Although we're not yet successful but these are the stuff (as per @agentspacecake) which we have tried so far:

1. Allowed CORS in the S3 bucket, example config - done
2. Allowed CORS in the back end using CORS node module - done
3. Allowed CORS in the nginx proxy using the CORS headers - done
4. Allow CORS on the load balancer's front - not done

Based on my studies so far:

• Per @Max@AWS, we need to whitelist the "Origin" header
• Per @Brian@AWS, we'd want to whitelist the "Origin" and any other headers you'd like to forward
• This was a bug in the past especially for chrome
• As per @Arun@AWS, the requests needs to contain the headers which are expected to return
• Not sure if the browser caching could surface the CORS issue
• Per @hescar, we can also try adding a 'Origin' header
• Looks like, we shall not use * wildcard
• The AWS staff says that ELB doesn't support CORS yet
• The feature request to ELB CORS support still looks open
• The docs says that the JSON Content-Type is not allowed in simple/actual requests

Requests only use the GET or POST HTTP methods. If the POST method is used, then Content-Type can only be one of the following: application/x-www-form-urlencoded, multipart/form-data, or text/plain.

Hope this helps to some extent.