CORS error calling AWS API Gateway from Django

Question

I built a simple RESTful endpoint using AWS Lambda and API gateway. API Gateway has CORS enabled, and the client is sending the proper headers as described here

The client app was built in Django and uses JQuery:

 $.ajax({
    type: 'GET',
    url: baseUrl,
    crossDomain: true,
    contentType: 'application/json'
})

Also, the Lambda function itself returns the following payload:

return {
    'statusCode': 200,
    'headers': {
        'Content-Type': 'application/json',
        "Access-Control-Allow-Origin": "*",
        "Access-Control-Allow-Credentials": "true"
    },
    'body': json.dumps(json_response)
}

Chrome is still throwing a CORS error:

No 'Access-Control-Allow-Origin' header is present on the requested resource

Am I missing something?

Most browsers will send a "preflight" OPTIONS request to the endpoint, if this response contains the correct CORS headers will then send the actual request. You need to configure your endpoint to send the correct CORS headers for OPTIONS requests https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html — Iain Shelvington, Aug 26 '19 at 01:07
Thanks! The OPTIONS method is already returning proper CORS headers though: Access-Control-Allow-Headers, Access-Control-Allow-Methods and Access-Control-Allow-Origin — vt_todd, Aug 26 '19 at 01:26
What’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. Is it a 4xx or 5xx error rather than a 200 OK success response? — sideshowbarker, Aug 26 '19 at 01:52
Try doing "Enable CORS" from Actions menu. It'll add an OPTIONS method. Post doing this, follow the following link. Hope it helps. https://stackoverflow.com/questions/35190615/api-gateway-cors-no-access-control-allow-origin-header — Showmik Bose, Aug 26 '19 at 05:16

score 0 · Answer 1 · answered Aug 26 '19 at 11:47

0

I couldn't tell if your question was answered based on the comments, but you may be missing the "Access-Control-Allow-Headers" header.

{
    "headers" : {
        'Access-Control-Allow-Origin' : '*',
        'Access-Control-Allow-Headers':'Content-Type,X-Amz-Date,Authorization,X-Api-Key,X-Amz-Security-Token',
        'Access-Control-Allow-Credentials' : True,
        'Content-Type': 'application/json'                        
    },
    "isBase64Encoded": False,
    "statusCode": 200,
    "body"  : json.dumps(json_response),
}

For this to work, you have to be using LAMBDA_PROXY integration on the API Gateway endpoint.

answered Aug 26 '19 at 11:47

Mike McCartin

150
5

Thank you for all responses. Unfortunately I had enabled CORS from the Action menu already, which also created the OPTIONS method. I left the default options and deployed the API to dev. As suggested, I tried adding the Access-Control-Allow-Headers option in the Lambda function response and that didn't seem to work. Given how popular Lambda, API Gateway and Django are I was hoping this was a common problem with a common solution. If not then I'll just keep at it and update this post when I find the solution – vt_todd Aug 27 '19 at 00:05

score 0 · Answer 2 · answered Aug 27 '19 at 00:30

Found the answer here

Under Gateway Responses, edit the Default 4xx settings and add the Response Header 'Access-Control-Allow-Origin' : '*'

Note: once I did that I got a { "message" : "forbidden" } response from the API, I needed to add headers to the API call in JQuery:

 $.ajax({
    type: 'GET',
    url: baseUrl,
    crossDomain: true,
    headers: { "x-api-key": apiKey },
    contentType: 'application/json'
})

CORS error calling AWS API Gateway from Django

2 Answers2