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

Posted

技术标签:

【中文标题】请求的资源(AWS、API Gateway、S3、CORS)上不存在“Access-Control-Allow-Origin”标头【英文标题】:No 'Access-Control-Allow-Origin' header is present on the requested resource (AWS, API Gateway, S3, CORS) 【发布时间】:2021-06-29 11:19:33 【问题描述】:

我正在尝试使用 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 的响应标头”。我已经使用“*”设置了集成响应标头映射

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

【问题讨论】:

'Access-Control-Allow-Origin'response 上设置的标头。您不能在请求中设置它。 【参考方案1】:

错误消息指出它是 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 添加到方法响应和 '*' 到集成响应)。

【讨论】:

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

以上是关于请求的资源(AWS、API Gateway、S3、CORS)上不存在“Access-Control-Allow-Origin”标头的主要内容,如果未能解决你的问题,请参考以下文章

如何为 CORS 预检请求绕过 AWS API Gateway 代理资源上的 Cognito 授权方?

在 AWS Lambda 函数中从 S3 获取对象并发送到 Api Gateway

通过 ElasticBeansStalk 上托管的 API Gateway 在 AWS S3 上上传图像

如何将 AWS CloudFront 和 API Gateway 并排用于同一个域?

AWS S3 静态站点 CORS jquery ajax POST 到 API Gateway

如何在 AWS API Gateway GET 请求中传递查询参数? [复制]