从 Django 调用 AWS API 网关的 CORS 错误答案

【问题标题】：CORS error calling AWS API Gateway from Django从 Django 调用 AWS API 网关的 CORS 错误
【发布时间】：2019-12-30 05:17:24
【问题描述】：

我使用 AWS Lambda 和 API 网关构建了一个简单的 RESTful 端点。 API 网关已启用 CORS，并且客户端正在发送正确的标头，如 here 所述

客户端应用程序是在 Django 中构建并使用 JQuery：

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

此外，Lambda 函数本身会返回以下负载：

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

Chrome 仍然抛出 CORS 错误：

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

我错过了什么吗？

【问题讨论】：

大多数浏览器会向端点发送“preflight” OPTIONS 请求，如果此响应包含正确的 CORS 标头，则会发送实际请求。您需要配置您的端点为 OPTIONS 请求发送正确的 CORS 标头docs.aws.amazon.com/apigateway/latest/developerguide/…
谢谢！ OPTIONS 方法已经返回了正确的 CORS 标头：Access-Control-Allow-Headers、Access-Control-Allow-Methods 和 Access-Control-Allow-Origin
响应的 HTTP 状态码是什么？您可以使用浏览器开发工具中的网络窗格进行检查。是 4xx 还是 5xx 错误而不是 200 OK 成功响应？
尝试从“操作”菜单中执行“启用 CORS”。它将添加一个 OPTIONS 方法。发布此操作，请点击以下链接。希望能帮助到你。 stackoverflow.com/questions/35190615/…

标签： jquery django amazon-web-services aws-lambda cors

【解决方案1】：

找到答案here

在网关响应下，编辑默认 4xx 设置并添加响应标头 'Access-Control-Allow-Origin' : '*'

注意：一旦我收到来自 API 的 { "message" : "forbidden" } 响应，我需要在 JQuery 中向 API 调用添加标头：

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

【讨论】：

【解决方案2】：

我无法判断您的问题是否已根据 cmets 得到回答，但您可能缺少“Access-Control-Allow-Headers”标题。

{
    "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),
}

为此，您必须在 API Gateway 端点上使用 LAMBDA_PROXY 集成。

【讨论】：

感谢您的所有回复。不幸的是，我已经从 Action 菜单中启用了 CORS，这也创建了 OPTIONS 方法。我保留了默认选项并将 API 部署到 dev。正如建议的那样，我尝试在 Lambda 函数响应中添加 Access-Control-Allow-Headers 选项，但这似乎不起作用。鉴于 Lambda、API Gateway 和 Django 的流行程度，我希望这是一个通用解决方案的常见问题。如果没有，那么我会坚持下去，并在找到解决方案时更新这篇文章