CORS access error for PUT method, api on aws hosted on elastic beanstalk

Question

I've deployed an api on AWS API Gateway using http custom integration

I've enabled CORS as seen below:

_{(source: upload.cat)}

For both GET and PUT methods, I am getting the following error: "url from origin [my origin] has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource"

Code:

 fetch(url, {
  method: 'POST', 
  mode: "cors",
  headers: {
    'Content-Type': 'application/json',
    'Access-Control-Allow-Headers': 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token' //copied from screenshot above 
  },
  body: JSON.stringify(data)
})
.then(response => console.log('Success:', response))
.catch(error => console.error('Error:', error));
}

Answer 1

Access-Control-Allow-Headers are set in the server, you should remove it from your code. It won't make any difference if you put it in your request.

Is your API Gateway method protected by Lambda Authorizer or configured to use an API Key? If so, request might be rejected by one of them and response won't include Access-Control-Allow-Origin header so browser's preflight check will be failed.

You also need to check what response is being returned by API method integration. In case of Proxy Lambda, response should include Access-Control-Allow-Origin header.

Take a look at integration response documentation.