AWS API Gateway 端点从 S3 上的静态站点发布时出现 CORS 错误答案

【问题标题】：AWS API Gateway endpoint gives CORS error when POST from static site on S3AWS API Gateway 端点从 S3 上的静态站点发布时出现 CORS 错误
【发布时间】：2016-03-23 08:32:34
【问题描述】：

我创建了一个使用无服务器（serverless.com）的 API 端点，我通过 API 网关公开了该端点。尽管我已从

启用 CORS，但我收到以下错误

XMLHttpRequest 无法加载 https://xxxxxxxxx.execute-api.us-west-2.amazonaws.com/development/signup。请求中不存在“Access-Control-Allow-Origin”标头资源。起源 'http://yyyyyyyyy.com.s3-website-us-east-1.amazonaws.com' 因此是不允许访问。

尽管我设置了origin 标头，但当我使用 Postman 发出请求时，我没有收到任何错误。我该如何解决这个问题？

【问题讨论】：

postman 不关心 CORS，如果没有启用 CORS，postman 仍然会处理请求，但是如果没有启用 CORS，浏览器不允许 api 调用。

标签： amazon-s3 cors aws-api-gateway

【解决方案1】：

如果您使用的是 AWS lamda，请按如下方式设置响应标头。仅 API 网关上的配置不起作用

headers: {
            'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*',
        },

【讨论】：

【解决方案2】：

我正在使用 AWS sdk 进行上传，在花了一些时间在线搜索之后，我偶然发现了这个线程。感谢@lsimoneau 45581857 事实证明，同样的事情正在发生。我只是通过附加 region 属性将我的请求 Url 指向我存储桶上的区域，它就起作用了。

 const s3 = new AWS.S3({
 accessKeyId: config.awsAccessKeyID,
 secretAccessKey: config.awsSecretAccessKey,
 region: 'eu-west-2'  // add region here });

【讨论】：

【解决方案3】：

您需要为所有方法启用 CORS。意味着，您需要为所有方法添加以下三个标题

            "headers": {
            "Access-Control-Allow-Origin": {
                "type": "string"
            },
            "Access-Control-Allow-Methods": {
                "type": "string"
            },
            "Access-Control-Allow-Headers": {
                "type": "string"
            }
        }

将这些标头添加到 JSON 中的所有方法中是一项繁琐的任务。

在 Java 中创建了一个实用程序，可自动将这些标头添加到 Swagger JSON。您可以在将其导入 API Gateway 之前运行它并导入在所有方法中启用了 CORS 的输出 JSON

https://github.com/anandlalvb/SwaggerToAPIGateway

我希望这个实用程序可以帮助任何寻找此功能的人轻松完成。

【讨论】：

【解决方案4】：

我遇到了这个问题...我启用了 CORS，测试在发送标头时工作，但是当我从我的应用程序调用它时它失败并且在响应中找不到标头。

这是因为在设置 CORS 之后，您必须部署 API。我部署了 API，一切正常。

【讨论】：

【解决方案5】：

我遇到了几乎同样的问题，正如我在另一个问题中发布的那样，我需要在我的回复中添加以下标题：

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'
        }

并且，根据本文档：

http://docs.aws.amazon.com/apigateway/latest/developerguide/how-to-cors.html

当您在 API Gateway 配置中为 lambda 函数使用代理时，post 或 get 方法没有添加标头，只有 options 方法有。您必须在响应（服务器或 lambda 响应）中手动执行。

除此之外，正如这里有人已经说过的那样，我需要在我的 API 网关发布方法中禁用“需要 API 密钥”选项。

【讨论】：

【解决方案6】：

“POST”到 API Gateway 时，我遇到了同样的问题。但我找到了解决这个问题的方法。

在为方法资源启用 CORS 并添加必要的标头后，例如'Access-Control-Allow-Origin' = '*' 通配符，还是失败。

转到您正在调用的资源的 OPTIONS、'GET'、'POST' 等。单击该资源的“方法请求”窗格，设置 API Key = FALSE，不要将 API Key 设置为 true .这将导致 CORS 错误。

原因，OPTIONS 在技术上不是一个方法，它是一个执行 Preflight 请求的浏览器函数，因此在 Preflight 期间浏览器不知道要发送什么 API 密钥，只有在响应返回给浏览器后才知道'Access-Control-Allow-Origin' = '*' 然后它将查找 HTTP 请求的代码以设置 X-Api-Key 的标头 = 某个值。

注意：invoke 方法本身、'POST' 等可以有 API Key = True，这非常好。

希望这能帮助那些像我一样挣扎了一段时间的人:)

【讨论】：

由于这个问题，我已经把头发拉了好几天。这是为我解决它的答案。感谢发帖。
确保在此之后部署 API！这解决了我几天来一直遇到的问题！

【解决方案7】：

正如 Jack Kohn 指出的那样，AWS 控制台不会在非 200 响应中添加 CORS 标头，并且显然不允许您添加任何自定义标头。

通过导出到 swagger 并手动编辑文件（刚刚复制 200 响应）并将其导入回来，我能够在失败的请求上启用 CORS 标头。

响应应如下所示：

  responses:
    200:
      description: "200 response"
      schema:
        $ref: "#/definitions/Empty"
      headers:
        Access-Control-Allow-Origin:
          type: "string"
    401:
      description: "401 response"
      schema:
        $ref: "#/definitions/Empty"
      headers:
        Access-Control-Allow-Origin:
          type: "string"
  x-amazon-apigateway-integration:
    responses:
      default:
        statusCode: "200"
        responseParameters:
          method.response.header.Access-Control-Allow-Origin: "'*'"
        responseTemplates:
          application/json: "__passthrough__"
      Authentication Failed.*:
        statusCode: "401"
        responseParameters:
          method.response.header.Access-Control-Allow-Origin: "'*'"
        responseTemplates:
          application/json: "__passthrough__"

希望这会有所帮助。

【讨论】：

这帮助我调试了我的问题。非常感谢。需要在响应中指定标头。
我使用了一个支持 CORS 的 Chrome 扩展来调试问题。

【解决方案8】：

我们现在有一个错误，即对 API 网关的失败请求不会包含适当的 CORS 标头，这会掩盖请求中的实际错误。

我想补充一下 Ken 所说的内容，并确保您已在控制台中以及使用 Postman 或其他非浏览器客户端的已部署版本上彻底测试了 API 和资源。我预计 API 本身存在问题，并且您的 CORS 配置正确。

【讨论】：

我也意识到了这一点，使用 Chrome 扩展程序启用 CORS 并发现实际错误。但现在它已修复，当 CORS Chrome 扩展程序“打开”时，网页就像一个魅力。但是当 CORS Chrome 扩展程序处于“关闭”状态时，仍然会出现此 No 'Access-Control-Allow-Origin' header is present on the requested resource. 错误。而且我仍然没有在响应标头中看到任何“Access-Control-Allow-Origin”。我也得到了 Postman 的预期输出。
我还建议您查看浏览器中的实际响应。在 Chrome 中，在网络选项卡下。这可以提供有关错误的更多详细信息
@jack-kohn-aws，刚刚碰到类似的东西，修复了吗？它是几个月前发布的
@Jason 你的小费帮了大忙。我收到了这个错误，但它掩盖了下面的错误请求。谢谢。
我只花了一个小时试图弄清楚为什么您的文档不起作用，这实际上不是您的文档的错，而是我后来没有部署 API。您能否考虑将其放入您的文档中：docs.aws.amazon.com/apigateway/latest/developerguide/…

【解决方案9】：

我将通过在 AWS 控制台中检查您的 API 来开始故障排除，以确保无服务器以您期望的方式注册所有内容。

加载 AWS 控制台并导航到 API Gateway 服务。
点击 API 将其打开。
找到您的 /signup 资源
确保在 /signup 下看到 OPTIONS 方法
单击每个资源，包括选项并检查以下内容：

一个。点击Integration Response，点击表格第一行200的箭头将其打开。

b.单击箭头打开标题映射

c。确保您看到 Access-Control-Allow-Origin 映射到“*”

如果您发现其中一种方法缺少此标头，则快速修复方法是单击 /signup 资源并单击启用 CORS 按钮。 AWS 将为您构建所有方法的 OPTIONS 和标头映射。当然，您仍然需要弄清楚为什么 serverless 没有为您设置好东西，但这至少可以让您继续前进。

关于启用 CORS 按钮的另一个注意事项，如果您稍后添加其他方法，则必须再次单击它以重新运行该工具以使用 CORS 设置新方法。

【讨论】：

这是一个设置了Access-Control-Allow-Headers : 'Content-Type,X-Amz-Date,Authorization,X-Api-Key'、Access-Control-Allow-Methods : 'POST,OPTIONS' 和Access-Control-Allow-Origin : '*' 的OPTIONS 方法。我在我的 POST 中看到 Access-Control-Allow-Origin 映射到“*”。我多次绑定了启用 CORS 按钮。
“关于启用 CORS 按钮的另一个说明，如果您稍后添加其他方法，则必须再次单击它以重新运行该工具以使用 CORS 设置新方法。” - 这是解决我问题的关键。