我有一个精细上传的一种形式，我加载初始的文件列表（按实施的这里）

I have a form with a Fine Uploader and I am loading an initial file list (as described here)

有关的初步文件，我也回到了 thumbnailUrl 指向我的文件Amazon的S3。

For the list of initial files I am also returning the thumbnailUrl which points to my files in Amazon's S3.

现在我看到精细上传实际上是使一个HTTP请求到S3，并得到一个200 OK，但缩略图不显示，这是我在控制台中看到：

Now I see that Fine Uploader is actually making an HTTP request to S3 and gets a 200 OK but the thumbnail is not displayed and this is what I see in the console:

[Fine Uploader 5.1.3] Attempting to update thumbnail based on server response.
[Fine Uploader 5.1.3] Problem drawing thumbnail!

这是我的服务器响应：

{"name": 123, "uuid": "...", "thumbnailUrl": "...."}

现在精细上传发出GET请求，S3在thumbnailUrl属性指定的URL。请求是这样的：

Now Fine Uploader makes a GET request to S3 to the URL specified in the thumbnailUrl property. The request goes like this:

卷曲HERE_IS_MY_URL-H主持人：s3.eu-central-1.amazonaws.com-H的User-Agent：Mozilla的/ 5.0（Windows NT的6.1; WOW64; RV：39.0）的Gecko / 20100101 Firefox的/ 39.0-H接受：图像/ PNG，图像/ ; Q = 0.8，的/ *; Q = 0.5-H接受语言：EN-US，EN; Q = 0.5 - -com pressed -HDNT：1-H的Referer：的http：//本地主机：9000 / edititem / 65 -H原产地：的http：//本地主机：9000 -H连接：备存─活着-H缓存控制：最大年龄= 0

curl "HERE_IS_MY_URL" -H "Host: s3.eu-central-1.amazonaws.com" -H "User-Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:39.0) Gecko/20100101 Firefox/39.0" -H "Accept: image/png,image/;q=0.8,/*;q=0.5" -H "Accept-Language: en-US,en;q=0.5" --compressed -H "DNT: 1" -H "Referer: http://localhost:9000/edititem/65" -H "Origin: http://localhost:9000" -H "Connection: keep-alive" -H "Cache-Control: max-age=0"

响应：200确定与内容类型的应用程序/八位字节流

Response: 200 OK with Content-Type application/octet-stream

有没有办法，我缺少任何配置选项精细上传​​？难道说，这是一个CORS相关的问题？

Is there any configuration option for Fine Uploader that I am missing? Could it be that this is a CORS-related issue?

推荐答案

精细上传负荷的缩略图通过使用Ajax请求（您最初的文件列表端点返回的URL XMLHtt prequest ）在现代浏览器。为此，它会因此它可以扩展并正确定位图像preVIEW。

Fine Uploader loads thumbnails at the URL returned by your initial file list endpoint using an ajax request (XMLHttpRequest) in modern browsers. It does this so it can scale and properly orient the image preview.

您需要在您的S3存储桶一个CORS规则，允许通过一个GET请求JS访问。它看起来是这样的：

You'll need a CORS rule on your S3 bucket that allows JS access via a GET request. It will look something like this:

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

当然，你可能需要允许其他来源/头/方法依赖于其他任何你正在做的与S3。

Of course, you may need to allow other origins/headers/methods depending on whatever else you are doing with S3.