S3：AJAX POST 没有“访问控制允许来源”

Posted 2023-03-04

【中文标题】S3：AJAX POST 没有“访问控制允许来源”

【英文标题】：S3: No 'Access-Control-Allow-Origin' for AJAX POST

【发布时间】：2014-06-18 05:45:41

【问题描述】：

这个问题让我有点发疯。我正在尝试通过 AJAX POST 将文件上传到 S3 存储桶。

我的所有凭据都是正确的，因为当我执行正常的 HTTP POST 时，它会在 S3 存储桶中创建资源就好了。但我真的很想一次上传多个带有进度条的文件，因此我需要 AJAX。

我在我的 S3 存储桶上设置了 CORS：

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>http://localhost:3000</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <AllowedHeader>*</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

现在我只是想让它在我的开发环境中工作（localhost:3000，使用标准 Rails 4.1）。

据我了解，上述 CORS 规则应该允许从 localhost:3000 到 S3 存储桶的 AJAX 请求。

但是，每次我通过 AJAX 提交文件时，都会收到以下错误：

XMLHttpRequest cannot load https://s3.amazonaws.com/<BUCKET>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access.

这对我来说没有任何意义，因为 localhost:3000 是通过 CORS 规则授予访问权限的。

我还提供了我用来提交表单的 JS 的 sn-p：

  $.ajax(
    method: "POST",
    crossDomain: true,
    url: "https://s3.amazonaws.com/<BUCKET>",
    data: $(this).serialize() # Contains S3 necessary values
  )

表单包含必要的 Amazon S3 键/等输入。我知道它们可以工作，因为当我执行正常的 HTTP POST 时，它会在 S3 中正确创建资产。我要做的就是 AJAXify 进程。

我在这里遗漏了什么明显的东西吗？

使用：Rails 4.1、jquery-file-upload、fog gem（用于 S3）

【问题讨论】：

您是否确认POST 正在发送Origin 标头？似乎某些浏览器可能不会，因为它们将localhost 视为不同的安全级别。

我已经检查过了。我正在使用 Chome 的开发人员工具，它说它在请求中提交了Origin: http://localhost:3000。它确实有一个注释说CAUTION: Provisional headers are shown。我还没有查到，但我想我也需要排除它。

找到解决方案了吗？

@klchoi：自从我接触这个问题已经一年了，但我相信亚马逊推出了一些更新，通过允许直接发布到他们的存储桶来解决我的问题。我不在那个项目上，所以我无法验证。抱歉，我无法提供更多见解。

【参考方案1】：

你可以换个试试

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

【参考方案2】：

您的问题似乎与我遇到的问题非常相似，该问题也从未正确（准确）回答，并且似乎是与浏览器限制有关的问题，而不是其背后的实际传输技术。

这是我原来的问题的链接以及我在 SO 上收到的答案： Why Doesn't Microsoft Skydrive Download Multiple Files via API?

希望这可以让您深入了解您的问题，而不仅仅是噪音。