当 POST 来自 S3 上的静态站点时，AWS API 网关端点给出 CORS 错误

Question

我已经使用无服务器 (serverless.com) 创建了一个 API 端点，我通过 API 网关公开了它。尽管我从

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

XMLHttpRequest cannot load https://xxxxxxxxx.execute-api.us-west-2.amazonaws.com/development/signup. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://yyyyyyyyy.com.s3-website-us-east-1.amazonaws.com' is therefore not allowed access.

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

Answer 1

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

加载 AWS 控制台并导航到 API 网关服务。
单击 API 将其打开。
找到你的 /signup 资源
确保您在 /signup
单击包含选项的每个资源并检查以下内容：

一个。点击Integration Response，点击table第一行200的箭头打开。

b。单击箭头打开 Header 映射

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

如果您发现其中一种方法缺少此 header，快速解决方法是单击返回 /signup 资源，然后单击启用 CORS 按钮。 AWS 将为您在所有方法上构建 OPTIONS 和 header 映射。当然，您仍然需要弄清楚为什么无服务器没有为您设置好东西，但这至少会让您前进。

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

Answer 2

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

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

Answer 3

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

我能够在请求失败时启用 CORS headers，方法是导出到 swagger 并手动编辑文件（只需复制 200 响应）并将其导入回来。

响应应如下所示：

  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__"

希望对您有所帮助。

Answer 4

我在 'POST' 到 API 网关时遇到了同样的问题。但我找到了解决问题的方法。

为方法资源启用 CORS 并添加必要的 Headers 例如'Access-Control-Allow-Origin' = '*' 通配符，仍然失败。

转到您正在调用的资源的选项，'GET'、'POST'，等等。单击该资源的 "Method Request" 窗格，设置 API Key = FALSE，不要将 API 键设置为 true。这将导致 CORS 错误。

原因，OPTIONS在技术上不是方法，它是执行Preflight请求的浏览器功能，因此在Preflight期间浏览器不知道发送什么API键，它只会知道之后才知道对 'Access-Control-Allow-Origin' = '*' 的浏览器的响应是 return 然后它将查找 HTTP 请求的代码以设置 X-Api-Key = 某些值的 Headers。

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

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

Answer 5

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

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

Answer 6

我遇到了几乎相同的问题，因为我在另一个问题中 posted，我需要在我的回复中添加以下 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'
        }

并且，根据此文档：

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

当您在 API 网关配置上使用 lambda 函数代理时，post 或 get 方法没有添加 headers，只有选项方法添加。您必须在响应（服务器或 lambda 响应）中手动执行。

除此之外，我需要在 API 网关 post 方法中禁用 'API Key Required' 选项，正如这里有人所说的那样。

Answer 7

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

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

Answer 8

您需要为所有方法启用 CORS。意思是，您需要为所有方法添加以下三个 headers

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

将这些 headers 添加到 JSON 中的所有方法是一项繁琐的工作。

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

https://github.com/anandlalvb/SwaggerToAPIGateway

我希望这个实用程序可以帮助任何正在寻找它的人轻松地做到这一点。

Answer 9

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

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

当 POST 来自 S3 上的静态站点时，AWS API 网关端点给出 CORS 错误

AWS API Gateway endpoint gives CORS error when POST from static site on S3

amazon-s3

cors

aws-api-gateway