AWS API Gateway CORS Configuration Not Allowing OPTIONS Requests for React App
I just started working with I'm working on a personal project and I'm having trouble configuring CORS for my AWS API Gateway that is meant to be accessed by a React app..... Despite following the documentation, my OPTIONS requests are returning a 403 Forbidden behavior. I've set up the API Gateway to allow specific origins, especially `https://my-react-app.com`, and I've enabled CORS in the API settings. Here’s how I set it up: 1. I added CORS to the `GET` and `POST` methods of my API. 2. In the CORS configuration, I allowed `https://my-react-app.com` in the 'Access-Control-Allow-Origin' header and specified the methods `GET, POST, OPTIONS`. 3. I also included `Access-Control-Allow-Headers` with the values `Content-Type, Authorization`. Here’s a snippet of my API Gateway configuration: ```json { "allowOrigins": ["https://my-react-app.com"], "allowMethods": ["GET", "POST", "OPTIONS"], "allowHeaders": ["Content-Type", "Authorization"], "maxAge": 300 } ``` After deploying my API, I verified the CORS settings using the AWS console. However, when I make a request from my React app, the browser console shows the following behavior: ``` Access to fetch at 'https://my-api.execute-api.us-east-1.amazonaws.com/prod/resource' from origin 'https://my-react-app.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP status in the range 200-299. ``` I’ve tried redeploying the API multiple times and even invalidating the CloudFront cache, but the scenario continues. My React app is running on version 17.0.2, and I’m using AWS API Gateway version 1.0.0. What am I missing in my CORS setup? Any insights would be greatly appreciated! Thanks in advance!