When I attempt to request a lambda-backed API (using API gateway, deployed using the CLI and Cloud Development Kit) from my react app, I get the following error:

Access to XMLHttpRequest at '' from origin 'http://localhost:3000' 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  net::ERR_FAILED

My API resources defined using the CDK are all passed into this method

When I attempt to request a lambda-backed API (using API gateway, deployed using the CLI and Cloud Development Kit) from my react app, I get the following error:

Access to XMLHttpRequest at 'https://xxxxxxxxxx.execute-api.eu-west-1.amazonaws./prod/xxxxx' from origin 'http://localhost:3000' 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://xxxxxxxxxx.execute-api.eu-west-1.amazonaws./prod/xxxxx net::ERR_FAILED

My API resources defined using the CDK are all passed into this method

• javascript
• reactjs
• amazon-web-services
• aws-amplify
• aws-cdk

• this may seem like a silly question, but did you enable CORS in API Gateway and re-deploy the API? – danimal Commented Aug 18, 2019 at 21:05
• @danimal yes I have tried that, but the problem is that should already be taken care of by the CDK. – wllkle Commented Aug 18, 2019 at 21:14
• Are you able to provide a snippet of the CDK code you are using to deploy the API? – Icehorn Commented Aug 19, 2019 at 5:39

1 Answer 1

Like explain here, you need to enable CORS in API Gateway, BUT you also need to return an Access-Control-Allow-Origin header from your Lambda because API Gateway doesn't add that automatically to the responses.

Here is a sample of what my Lambda return for a simple Get :

return {
  headers,
  body: JSON.stringify(response.Item),
  statusCode: 200
};

const headers = {
  "Access-Control-Allow-Origin": "*", // Required for CORS support to work
  "Access-Control-Allow-Credentials": true // Required for cookies, authorization headers with HTTPS
}