Warning: file_get_contents(/data/phpspider/zhask/data//catemap/1/amazon-web-services/12.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 否';访问控制允许原点';请求的资源(AWS、API网关、S3、CORS)上存在标头_Javascript_Amazon Web Services_Amazon S3_Cors_Aws Api Gateway - Fatal编程技术网

Javascript 否';访问控制允许原点';请求的资源(AWS、API网关、S3、CORS)上存在标头

Javascript 否';访问控制允许原点';请求的资源(AWS、API网关、S3、CORS)上存在标头,javascript,amazon-web-services,amazon-s3,cors,aws-api-gateway,Javascript,Amazon Web Services,Amazon S3,Cors,Aws Api Gateway,我正在尝试使用API网关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 po

我正在尝试使用API网关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。(所有东西都打了勾)。 我尝试了使用和不使用
访问控制允许
标题,它们都不起作用。 我错过了什么

在API网关控制台上,我已经设置了“200的响应头”。我已经用“*”设置了集成响应头映射


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

错误消息指出是飞行前请求(即资源上的选项方法)没有正确的访问控制允许原点设置。如果选择选项方法并编辑方法响应>响应标题,则应列出
访问控制允许原点
。下一步是为它设置一个值。编辑Integration Response>Header Mappings>Access Control Allow Origin并将值设置为
“*”
(带单引号)。这使它在故障排除过程中完全打开,您可以稍后更改该值,使其更具体,如
https://example.com“


在这一步之后,可能会出现后续错误,PUT方法调用也会说同样的话。您可以对Put方法执行这些相同的步骤(将
访问控制允许原点添加到方法响应中,并将
'*'
添加到集成响应中)。

'Access-Control-Allow-Origin'
是响应上设置的标题。您不能在请求时设置它。1。我已经设置了“200的响应头”2。我已经用“*”设置了集成响应头映射,只是为了澄清一下,您已经在APIGW中的OPTIONS方法上仔细检查了这些头/值,对吗?您的描述提到在PUT方法上启用它。确实,APIGW将在启用CORS时为您创建选项方法,但如果不以某种方式进行设置,则不会始终正确设置值。错误消息似乎非常具体地说明了错误的原因(飞行前aka选项)更新后,您已将API部署到正确的阶段(示例中为/dev)?为了帮助缩小错误范围,如果禁用CORS,它是否允许您上载文件?另一个想法是…可能是请求出错并被传输到默认的APIGW响应之一,这就是CORS问题发生的地方。在APIGW控制台中,如果您单击网关响应并编辑默认4xx/5xx的标题,并将
访问控制允许源代码“*”
添加到这些标题中,这可能有助于揭示真正的问题。事实证明,这只是一行错误
内容类型
必须转到
标题
。无论如何谢谢你!