Access-Control-Allow-Origin issue when GET from API gateway and lambda

Question

I am using Angular httpclient to issue get to API Gateway, which triggers lambda to get data and return back. From the network diagram, I am seeing the data being returned but I don't receive the data in my handler of the httpclient get, as if an error occured. And I get this error:

Failed to load https://yxalbf1t6l.execute-api.us-east-1.amazonaws.com/dev/todos: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:4200' is therefore not allowed access.

I've implemented the CORS header setting on lambda per suggestion from: API Gateway CORS: no 'Access-Control-Allow-Origin' header

And checked on API gateway to have response mapped in OPTIONS from https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

Any suggestions?

Did you add the Access-Control-Allow-Origin as a 200 response header in your Method Response config? — Khalid T.
I add that to OPTIONS. In GET, it only let's me add the 200 response header of Access-Control-Allow-Origin but no option to add any value... — Evan
When following AWS guide to CORS setting on API Gateway docs.aws.amazon.com/apigateway/latest/developerguide/…, I actually got errors on the last 4, including setting Access-Control-Allow-Origin on GET. — Evan
installing cors plugin worked. Could somehow explain to me why? I am thinking that browser is blocking the data that came back. So if I serve frontend on AWS s3, I won't have this issue since origin will be the same? — Evan

ysungur ysungur · Accepted Answer · 2019-06-17T09:39:10

On my side, even thought API Gateway generates the CORS headers and OPTIONS method, I still needed to inject the header on my lambda.

Chrome expects to see the same access control headers on every response, and Lambda Proxy integration does not inject thosse.

I simply added a header line to my return message, like:

return {
    'statusCode': 200,
    "headers": { "Access-Control-Allow-Origin": "*"},
    'body': json.dumps(message, default=convert_timestamp)
}

Access-Control-Allow-Origin issue when GET from API gateway and lambda

1 Answers