如何使用 AWS API Gateway 启用 CORS

Question

如何启用 CORS，以便可以从 jQuery 访问自定义 AWS API 网关？

我已经通过 API 网关公开了一个简单的 Python Lambda 函数来查找用户数据，我正在尝试使用 jQuery 访问它的端点，例如：

$.ajax({
    method: 'GET',
    url: 'https://slkdfjsl.execute-api.us-east-1.amazonaws.com/myapi/username?_='+new Date().getTime(),
    headers: {
        Authorization: authToken
    },
    data: {},
    contentType: 'application/json',
    success: function(result){
        //do stuff
    }
});

有时，这非常有效。有时，我会收到错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://slkdfjsl.execute-api.us-east-1.amazonaws.com/myapi/username?_=1606336278598  (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).

这是什么原因造成的？

我不明白的是这种不确定性。 Answers to similar questions 已解释您可能需要添加：

async: true,
dataType: 'jsonp',
crossDomain: true,

到 ajax() 调用以启用跨域访问，但这并不能解释为什么没有它的代码大部分时间都可以工作。

我尝试添加这些选项，但在 100% 的情况下完全破坏了它，每次都给我一个“401 未授权”错误。

有没有办法在我的代码中解决这个问题，或者这可能是 AWS API Gateway 实施的一个错误？

Answer 1

应该在后端允许跨域 (CORS) 而不是在 ajax 调用中。

尝试关注。

A. AWS 网关或 API 响应中的 CORS 设置

您也需要启用 CORS

1. 来自 API Gateway 控制台的 AWS API Gateway CORS 设置。 (https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors-console.htm)

2. 您需要在对 API 的响应中返回 CORS 标头

如果两者一起完成，第 1 点优先。

需要设置的标题是 '''

Access-Control-Allow-Origin=*
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE (you may even add all headers here during debugging)

Access-Control-Max-Age=0

Access-Control-Expose-Headers, Access-Control-Allow-Headers may be left as default.

'''

如果您认为您的设置正确，请确保注意以下几点。

B.NULL ORIGIN 您的本地应用程序（API 客户端）必须托管在网络服务器上。如果您直接从文件系统运行它，则您的来源为空。在 AWS CORS 设置中，从不允许空源。

C. API URL 必须存在不存在的 API 不允许使用 CORS。因此，请确保您的 API URL 正确。在这种情况下，您可能不会收到 API 确实存在错误（如果错误在子路径中）。检查最后是否需要斜杠 /。