时间戳

首页 > 解决方案 > 请求的资源（AWS、API Gateway、S3、CORS）上不存在“Access-Control-Allow-Origin”标头

javascript - 请求的资源（AWS、API Gateway、S3、CORS）上不存在“Access-Control-Allow-Origin”标头

问题描述

我正在尝试使用 API Gateway SDK 将图像文件上传到我的 S3 存储桶。但是我不断收到以下错误：

Access to XMLHttpRequest at 'https://*****.execute-api.*****.amazonaws.com/dev/upload/photophotobucket/me.png' from origin 'http://photofront.s3-website-*****.amazonaws.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource.

下面是我点击上传时启动的javascript代码：

var apigClient = apigClientFactory.newClient();

function UploadFile() {
    var filePath = document.getElementById('file_path').value //C:\fakepath\me.png
    var file = document.getElementById('file_path').files[0]
    var reader = new FileReader()
    document.getElementById('file_path').value = ""
    if ((filePath == "") || (!['png', 'jpg', 'jpeg'].includes(filePath.split(".")[1]))) {
      alert("WRONG FILE!! Please upload a valid PNG or JPG file")
    } else {
      var params = {
        bucket: 'photophotobucket',
        key: filePath.split("\\").slice(-1)[0], // "me.png"
        'Content-Type': file.type
      };
      var body = {}
      var additionalParams = {
        headers: {
          'x-api-key': 'MYAPIKEY',
          'Access-Control-Allow-Origin': '*',
          'Access-Control-Allow-Methods': 'OPTIONS,PUT'
        },
        queryParams: {}
      };
      reader.onload = function (event) {
        body = btoa(event.target.result)
        console.log("body")
        console.log(body)
        var whatToReturn = apigClient.uploadBucketKeyPut(params, body, additionalParams)
          .then(function (result) {
          })
          .catch(function (error) {
          });
        return whatToReturn
      }
      reader.readAsBinaryString(file)
    }
  }

我已经在我的 API 网关上为 PUT 方法启用了 CORS。（一切都已检查标记）。我尝试使用和不使用Access-Control-Allow标题，它们都不起作用。我错过了什么？

在 API Gateway 控制台上，我已经设置了“200 的响应标头”。我已经使用“*”设置了集成响应标头映射

如果您需要任何其他信息，请询问。

标签： javascriptamazon-web-servicesamazon-s3corsaws-api-gateway

解决方案

错误消息指出它是 Preflight 请求（也就是资源上的 Options 方法）没有正确的 Access-Control-Allow-Origin 设置。如果您选择 Options 方法并编辑 Method Response > Response Headers，您应该已经Access-Control-Allow-Origin列出。下一步是为它设置一个值。编辑 Integration Response > Header Mappings > Access-Control-Allow-Origin 并将值设置为'*'（带单引号）。这使得它在您的故障排除过程中非常开放，您可以稍后将值更改为更具体，例如'https://example.com'.

在此步骤之后，您可能会收到后续错误，其中PUT方法调用说了同样的话。您可以对 Put 方法采取相同的步骤（添加Access-Control-Allow-Origin到方法响应和'*'集成响应）。

推荐阅读