Uploadifive 和 Amazon s3 - Access-Control-Allow-Origin 不允许来源答案

【问题标题】：Uploadifive and Amazon s3 - Origin is not allowed by Access-Control-Allow-OriginUploadifive 和 Amazon s3 - Access-Control-Allow-Origin 不允许来源
【发布时间】：2013-05-23 03:51:52
【问题描述】：

我正在尝试让 Uploadifive（Uploadify 的 HTML5 版本）与 Amazon S3 一起使用。我们已经让 Uploadify 工作了，但是我们的一些访问者使用没有 Flash 的 Safari，所以我们也需要 Uploadifive。

我正在寻找 POST，但问题是 Uploadifive 发送的飞行前 OPTIONS 请求得到“403 Origin is not allowed by Access-Control-Allow-Origin”。

亚马逊上的 CORS 规则设置为允许 * 来源，因此我认为亚马逊没有理由拒绝该请求（并注意它接受来自 Flash 的请求，尽管我不知道 Flash 是否发送 OPTIONS 请求在 POST 之前）。如果我在亚马逊上的设置中没有犯一些大错误，我认为这与 Uploadifive 未设置为跨域请求有关，但我找不到有关如何检查/执行此操作甚至如何执行此操作的信息更改请求中发送的标头。

有没有人尝试过将 Uploadifive 与 Amazon S3 结合使用，您是如何解决这个问题的？

我的 S3 CORS 设置：

<?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>

编辑：在使用 --disable-web-security 标志测试 Chrome 后，我停止收到 403：s，所以看起来确实是 Uploadifive 没有正确设置跨域标头。现在问题变成了，Uploadifive的跨域设置怎么修改？

【问题讨论】：

标签： amazon-s3 uploadify cors

【解决方案1】：

胜利！

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

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。

【讨论】：

表单参数的顺序也有同样的问题 - 谢谢