10

我现在已经扫描了几乎所有内容，大多数人的解决方案只是在 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 规则有关，但正如您所见，它们已设置好。因此，有人知道还有什么问题吗？

谢谢。

4

2 回答 2

2

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

于 2014-02-23T13:10:37.067 回答
1

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

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

于 2014-01-17T15:35:07.553 回答