使用 jQuery Ajax 请求上传 CORS Amazon S3 文件答案

【问题标题】：CORS Amazon S3 file upload with jQuery Ajax request使用 jQuery Ajax 请求上传 CORS Amazon S3 文件
【发布时间】：2013-10-08 00:34:02
【问题描述】：

我现在已经扫描了几乎所有内容，大多数人的解决方案只是在 S3 服务上配置 CORS，这对我来说不起作用。我肯定错过了什么。就是这样：

我正在尝试在客户端使用 Ajax 调用将我的文件上传到 Amazon S3。我知道我的策略/签名是正确的，因为当我简单地提交表单时它就可以工作，但是当我尝试使用它进行 Ajax 调用时，我得到了

Origin "my host" is not allowed by Access-Control-Allow-Origin.

错误。我的表格：

<form id="fileform" action="https://mybucket.s3.amazonaws.com/" method="post" enctype="multipart/form-data">
    <input type="hidden" name="key" value="mykey">
    <input type="hidden" name="AWSAccessKeyId" value="myaccesskey">
    <input type="hidden" name="acl" value="public-read">
    <input type="hidden" name="Content-Type" value="image/jpeg">
    <input type="hidden" name="policy" value="mypolicy">
    <input type="hidden" name="signature" value="mysignature">
  </form>

在我的存储桶 CORS 中，我几乎允许一切，因为我很绝望：

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

选择一个文件并提交表单（通过单击它或使用 jQuery）就像一个魅力，但是使用序列化表单执行 Ajax 请求会给我错误。

var form = $('#fileform');
$.ajax({
  url: "https://mybucket.s3.amazonaws.com/",
  type: 'post',
  crossDomain: true,
  dataType: 'xml',
  data: form.serialize()
});

我知道这与 CORS 规则有关，但正如您所见，它们已经设置好了。因此，有人知道还有什么问题吗？

谢谢。

【问题讨论】：

标签： jquery ajax amazon-s3 xss cors

【解决方案1】：

您可以添加更多 HTML 标签<input type="file" name="uploadFile" />，因为没有文件您无法使用serialize() 方法发布文件数据。我建议你使用serializeArray() 而不是form.serialize()。

【讨论】：

【解决方案2】：

事实证明，Chrome 控制台中显示的错误消息与实际错误无关。

问题是jquery.serialize() 不保存文件输入，因为它在 XMLHttpRequest 中不受支持（仅在 XMLHttpRequest 2 中）。所以我发送到 S3 的 ajax 请求不包含文件。不知道为什么 S3 返回 CORS 错误，但是一旦我切换到使用 FormData 一切正常。现在我只需要弄清楚如何支持 IE 8 和 9...！

【讨论】：