1

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?

Evan
  • 507
  • 2
  • 7
  • 21
  • have you tried chrome cors plugin? – Naveen Kerati Feb 26 '18 at 07:28
  • Did you add the `Access-Control-Allow-Origin` as a 200 response header in your **Method Response** config? – Khalid T. Feb 26 '18 at 07:32
  • 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 Feb 26 '18 at 18:02
  • When following AWS guide to CORS setting on API Gateway https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html, I actually got errors on the last 4, including setting Access-Control-Allow-Origin on GET. – Evan Feb 26 '18 at 18:57
  • 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 Feb 27 '18 at 03:04

1 Answers1

0

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)
}
ysungur
  • 1
  • 1