Question

我现在已经扫描了几乎所有内容，他们解决的大多数人只是在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规则有关，但你可以看到它们已经设置好了。因此，任何人都知道还有什么可能是错的？

感谢。

Answer 1

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

Answer 2

原来Chrome控制台中显示的错误消息与实际错误无关。

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

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

2 个答案: