amazon-s3 - CORS、Amazon S3 和 Rails - 在 IE 10 和 Safari 上失败

Question

IE 10 支持 CORS。
Amazon S3 支持 CORS。

我们有直接从站点到 S3 的上传工作在所有浏览器中，但 IE 10(不打扰 IE 9-)。它是这样工作的:

用户选择一个文件(拖放或从文件输入中选择)

(POST) 我们必须在请求进入 S3 ( $.post('/static/sign_asset', { ... } ) 之前“签署”该请求，该 S3 有一个全天完美触发的回调。

(POST) 然后我们使用文件数据和签名数据等将 XHR 发送到 S3。

var xhr = new XMLHttpRequest();// etcvar fd = new FormData();// etcxhr.open('POST', url, true);xhr.send(fd);

The file uploads, everything works perfectly in all browsers except...

Problems start in IE 10:

4. Origin null not found in Access-Control-Allow-Origin header. and XMLHttpRequest: Network Error 0x80070005, Access is denied. No other browsers are showing this after we have set response.headers["Access-Control-Allow-Origin"] = "*" in the controller that sends the response. Even when we had this wrong, Chrome would show this error, but the request would still go through.

5. The file actually does get uploaded to S3, despite this error. Amazon S3 does it's 303 redirect thing - which is our verification that the file was successfully uploaded.

6. (GET) This is a redirect on a CORS Ajax request, so the "redirect" doesn't refresh the page it just comes back and hits our servers. IE 10 makes this request with a Content-Type of multipart/form-data; boundary=---------------------------7dd2ce2201da

This is what causes Rails to bug out.

Started GET "/static/signed/asset/tsabat/83ee6840-7158-0130-c19b-28cfe912f6ff?bucket=s.cdpn.io&key=5%2Fauthor-tim_2.jpg&etag=%2260fb3876d516553ff6f3a018066b3250%22" for 127.0.0.1 at
 2013-03-17 10:46:36 -0700

EOFError - bad content body:
  (gem) rack-1.4.5/lib/rack/multipart/parser.rb:74:in `block in Rack::Multipart::Parser#fast_forward_to_first_boundary'  (gem) rack-1.4.5/lib/rack/multipart/parser.rb:72:in `Rack::Multipart::Parser#fast_forward_to_first_boundary'
  (gem) rack-1.4.5/lib/rack/multipart/parser.rb:72:in `Rack::Multipart::Parser#parse'
  (gem) rack-1.4.5/lib/rack/multipart/parser.rb:15:in `Rack::Multipart.parse_multipart'
  (gem) rack-1.4.5/lib/rack/multipart.rb:25:in `ActionDispatch::Request#parse_multipart'
  (gem) rack-1.4.5/lib/rack/request.rb:336:in `ActionDispatch::Request#POST'
  (gem) rack-1.4.5/lib/rack/request.rb:201:in `ActionDispatch::Request#POST'

Safari 也失败 (6.0.2)

Safari 返回 200 状态代码，Rails 并没有对重定向感到害怕，但是 xhr.status 是错误的。 xhr.readyState == 4，但 xhr.status == 0。我们正在寻找 200 以确保它正常工作。这很容易修复，但仍然......

Chrome does fine - 似乎甚至没有设置 Content-Type

Firefox does fine - 内容类型 application/json; charset=utf-8
有 example pages这显示了 IE 10 处理 CORS 的情况，但它们没有处理这个重定向问题。

Answer 1

CodePen 团队成员在这里。我们想通了这一点...

我们想依赖于 S3 的 POST 功能中内置的 303 重定向，但事实证明这是有问题的，如上所示。相反，我们只是停止使用 S3 Form Field success_action_redirect并切换到 success_action_status .

对于后代，不要依赖 S3 的 303 重定向来跨浏览器一致地处理 xhr 请求。如果这样做，您将花时间与无效 header 、无效来源和龙作斗争。