AWS API Gateway CORS Configuration optimization guide with S3 Hosted Static Site
I'm stuck on something that should probably be simple. I'm currently working with a CORS scenario with my AWS API Gateway that interfaces with an S3 hosted static site. My setup consists of an S3 bucket serving a React app and an API Gateway endpoint that triggers a Lambda function to fetch some data from DynamoDB. No matter how I configure the CORS settings, I keep receiving the following behavior in the browser console: `Blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.` I have already set up CORS in the API Gateway for the specific endpoint, allowing my S3 bucket's URL. Here’s how the CORS configuration looks: ```json { "allowOrigins": ["https://mybucket.s3.amazonaws.com"], "allowMethods": ["GET", "POST", "OPTIONS"], "allowHeaders": ["Content-Type"] } ``` In my Lambda function, I'm also returning the necessary headers: ```javascript exports.handler = async (event) => { return { statusCode: 200, headers: { 'Access-Control-Allow-Origin': 'https://mybucket.s3.amazonaws.com', 'Access-Control-Allow-Headers': 'Content-Type', }, body: JSON.stringify({ message: 'Success' }), }; }; ``` Despite this, the browser still throws the CORS behavior when attempting to make a fetch call to the API. I’ve also tried adding an OPTIONS method to my API Gateway and configured the integration response properly but still no luck. I confirmed that the S3 bucket allows public access and that the API Gateway is deployed. Could anyone provide insight on what I might be missing or additional steps to ensure CORS is set up correctly? This is happening in both development and production on macOS.