启用 CORS 访问 AWS API Gateway？答案

【问题标题】：Enabling CORS to access AWS API Gateway?启用 CORS 访问 AWS API Gateway？
【发布时间】：2020-02-20 22:09:54
【问题描述】：

我正在尝试使用 jQuery 访问 AWS API 网关，例如：

$.ajax({
    method: 'GET',
    url: _config.api.invokeUrl + '/mymodel/' + id + '/attr',
    headers: {
        Authorization: authToken
    },
    data: {},
    contentType: 'application/json',
    success: function(result){
        console.log('success:'+result);
    },
    error: function ajaxError(jqXHR, textStatus, errorThrown) {
        console.error('Error: ', textStatus, ', Details: ', errorThrown);
        console.error('Response: ', jqXHR.responseText);
    }
});

但是，jQuery/浏览器会报 CORS 错误：

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://sd98fsf98.execute-api.us-east-1.amazonaws.com/test/mymodel/123/attr. (Reason: CORS request did not succeed).

显然，我无法通过托管来自 sd98fsf98.execute-api.us-east-1.amazonaws.com 的代码来解决此问题。我在网关 API 设置中找不到任何选项来禁用此检查。如何绕过 CORS 限制？

【问题讨论】：

您不想禁用检查（在客户端中），您想在网关 API 配置中启用 CORS 侦听器。见docs.aws.amazon.com/apigateway/latest/developerguide/…

标签： jquery cors amazon-gateway

【解决方案1】：

您需要在 API 网关中启用 CORS。这为我们设置了一个 options 方法，它添加了跨域访问所需的标头。

在您的 API Gateway 控制台中： Actions -> Enable Cors[Select '*' for everyone] -> Deploy API

部署API后，请求会先从options方法中获取headers，然后重定向到GET方法，就成功了。

请在 AWS DOCS 中找到有关启用 CORS 的更多信息： https://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

希望这会有所帮助！

【讨论】：

【解决方案2】：

除了 Ashwani Jha 的回答和 peeebeee 评论，请看这篇文章： https://enable-cors.org/server_awsapigateway.html

Amazon API Gateway 通过一个简单的方法添加了对 CORS 启用的支持 API Gateway 控制台中的按钮。不幸的是，该按钮有一个部分行为，因此仅针对 200 个答案正确设置 CORS（因此不是其他 HTTP 状态代码）并忽略 JQuery 标头支持。这到目前为止考虑的最佳解决方案是避免使用 CORS 按钮并手动设置配置。这可以在一个几个步骤：

登录 API Gateway 控制台

创建所有 REST 资源在设置 CORS 之前需要用他们的方法暴露（如果启用 CORS 后会创建新的资源/方法，这些步骤必须重复）

选择资源

添加 OPTIONS 方法，选择为集成类型“模拟”

对于资源的每个方法

转到响应方法

添加所有应支持的响应方法（即 200、500 等）

为每个响应代码设置响应标头

X-Requested-With

访问控制允许标头

访问控制允许来源

访问控制允许方法

转到集成响应，选择创建的响应代码之一，然后标头映射

插入标题的默认值示例：

X-Requested-With: '*'

Access-Control-Allow-Headers: 'Content-Type,X-Amz-Date,Authorization,X-Api-Key,x-requested-with'

访问控制允许来源：'*'

访问控制允许方法： '发布、获取、选项'

必须对每个方法重复此操作，包括新的创建选项

将 API 部署到阶段

使用 http://client.cors-api.appspot.com/client 检查 CORS 请求是否已成功启用

【讨论】：