0

I am trying to get Uploadifive (the HTML5 version of Uploadify) to work with Amazon S3. We already have Uploadify working, but a lost of our visitors use Safari without flash so we need Uploadifive as well.

I am looking to make a POST but the problem is that the pre-flight OPTIONS request that Uploadifive sends gets a "403 Origin is not allowed by Access-Control-Allow-Origin".

The CORS rules on Amazon are set to allow * origin, so I see no reason for Amazon to refuse the request (and note that it accepts the requests coming from Flash, although I don't know if Flash sends an OPTIONS request before the POST). If I haven't made some big mistake in my settings on Amazon I assume this has something to do with Uploadifive not being set up for cross-origin requests, but I can find no info on how to check/do this or even how to change the headers sent on the request.

Has anyone tried using Uploadifive with Amazon S3, and how have you gotten around this problem?

My S3 CORS setting:

<?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>
<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
</CORSRule>

Edit: After testing Chrome with the --disable-web-security flag I stopped getting 403:s, so it does seem like it is Uploadifive that is not setting cross domain headers properly. The question has now become, how do you modify the cross domain settings of Uploadifive?

4

1 回答 1

3

胜利！

在将我的头撞在墙上几个小时后，我发现了两个错误。

1) 您要发送到亚马逊的任何标头（除了最基本的标头之外）必须通过AllowedHeader标签在 CORS 设置中指定。所以我将我在亚马逊上的设置的 POST 部分更改为：

<CORSRule>
    <AllowedOrigin>*</AllowedOrigin>
    <AllowedMethod>POST</AllowedMethod>
    <AllowedHeader>*</AllowedHeader>
</CORSRule>

2) Uploadifive 在formData 中首先添加“文件”字段，亚马逊要求它是最后一个字段。所以我修改了 Uploadifive js，最后添加了文件字段。在 1.1.1 中，这是在第 393 行附近，这就是变化：

前：

// Add the form data
formData.append(settings.fileObjName, file);

// Add the rest of the formData
for (var i in settings.formData) {
    formData.append(i, settings.formData[i]);
}

后：

// Add the rest of the formData
for (var i in settings.formData) {
   formData.append(i, settings.formData[i]);
}

// Add the form data
 formData.append(settings.fileObjName, file);

这为我解决了这个问题。为了让 Uploadify 理解响应，可能还有一些工作要做，但是上传本身现在可以正常工作并返回 201 Created 。

于 2013-05-28T14:19:16.930 回答