Application Load Balancer having problems with CORS

Question

I am running into a CORS problem which says that I'm unable to load my webpage due to the following:

"Access to fetch at 'ALB Load balancer dns address:port' from origin 'ALB Load balancer dns address' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled."

After doing some troubleshooting and googling around, I am pretty confident that the issue is to do with AWS's load balancers not supporting CORS.

I have read that an API gateway can be used as a proxy to apply CORS headers to the ALB address to get around this but I have tried this approach and it doesn't seem to be resolving the issue.

Anyone have any suggestions as to what else can be done to bypass this problem?

P.S. I have tried applying CORS to my webserver (NGINX), Javascript code, and my flask application which didn't seem to make a difference when trying to access it from my Application load balancers DNS address. I have also tried contacting the mentioned ALB address via postman and it doesn't return an error about CORS

Answer 1

You can configure your apigateway with cors headers, methods and url. You just need to edit the configurations (to add new) and after that you can redeploy your apigateway configurations. (changes are only visible after deploy from api gateway).

1. If you save, it only saves your current configuration state but it does not apply the configurations.
2. In order to apply your current configuration you have to deploy your api gateway.

Here is the configuration:

As stated by the documentation:

Every time you update an API, you must redeploy the API to an existing stage or to a new stage. Updating an API includes modifying routes, methods, integrations, authorizers, and anything else other than stage settings.