API Gateway CORS issue using JS Fetch

Question

I've seen this question asked a few times, but, there doesn't seem to be clear response.

I've got an API Gateway attached to a Lambda function, a get call to the API should return a value, in this case either 0 or 1.

In postman this works fine, but, when I try it in my deployed code (which is JS) the fetch call fails:

Access to fetch at '[APIGATEWAYURL]' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled. (this also fails with a version in my s3 bucket.)

This answer: https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.html
shows an option to enable CORS, but I don't see that on my console...

Accepted Answer

Your Lambda function needs to return the right headers in the response, for example:

```
const responseHeaders = {
  'Content-Type': 'application/json',
  'Access-Control-Allow-Origin': '*',
};
const body = { 'userId': 13232 };
return {
  statusCode: 200,
  headers: responseHeaders,
  body: JSON.stringify(results),
};
```

You shouldn't have to configure CORS after you add those headers. But if you want to configure CORS on API Gateway then navigate to API Gateway in the console and click to open the API Gateway instance you want to change. Under details for that API Gateway open the side menu and make sure you are under resources, then you can enable CORS for a specific resource such as "/users". If you add methods then you'll need to add another header for `Access-Control-Allow-Methods` such as `'Access-Control-Allow-Methods': 'GET'`.

API Gateway CORS issue using JS Fetch

関連するコンテンツ