I'm currently working on hosting a full stack web application in AWS. The setup involves an Angular frontend stored in an S3 bucket behind CloudFront, using a domain from Route53. On the backend, there's a TypeScript Express project behind API Gateway. For authentication, I'm utilizing Auth0 and their sample frontend/backend apps available on their website. You can find them here: https://github.com/auth0-developer-hub/spa_angular_typescript_hello-world https://github.com/auth0-developer-hub/api_express_typescript_hello-world
When making requests that bypass the interceptor, everything works fine. But when attempting requests modified by the interceptor (such as after logging in with Auth0), I encounter the following error message: "Access to XMLHttpRequest at 'https://api-gateway.com/dev/api/messages/protected' from origin 'https://website.link' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource."
Here is the interceptor code in the auth.module:
[Interceptor code snippet]
Additionally, below is my index.ts file from the Express backend, where I explicitly allow the "Authorization" header that the interceptor attaches. I've validated the tokens being passed as well.
[Express backend code snippet]
I've tried various solutions like setting the 'Access-Control-AllowOrigin' header on routes but haven't had success, examples of which are provided below:
[Sample code snippets showing attempted configurations]
All these attempts resulted in the same CORS policy error.
Edit: Including my CloudFront configuration using Terraform below:
[CloudFront configuration code snippet]