I have deployed a full-stack ecommerce application to AWS. This app consists of an Angular frontend and a Spring Boot application that exposes certain REST API endpoints, such as Products and Product Categories.
I've configured the backend so that one API in particular, Orders, is only accessible to applications that have an access token.
In my Angular frontend, I've implemented an interceptor to add an access token to the request for the Orders API.
My REST API and Angular app are each fronted by a CloudFront distribution:
The domain for the Angular app's CF dist. is https://myshop.com
The domain for the CF dist. that exposes my REST APIs is https://myshopapi.com/api
For the REST API dist., I configured CORS to allow GET requests from all origins.
I visit https://myshop.com and click the Orders link, thus making a GET request to the Orders API so I can retrieve a customer's orders, but no orders are listed. I check the Dev Tools console to discover the following errors:
Access to XMLHttpRequest at 'https://myshopapi.com/api/orders' from origin 'https://myshop.com' 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.
GET https://myshopapi.com/api/orders net:: ERR_FAILED
The problem is that when https://myshop.com sends GET requests to my other REST APIs, I don't have ANY issues. I only get these errors when I try to access the Orders API.
preflight request is Options NOT Get
you should configured CORS to allow GET and Options requests from all origins
see https://developer.mozilla.org/en-US/docs/Glossary/Preflight_request
see also Why is an OPTIONS request sent and can I disable it?