CORS,Amazon S3和Rails - 在IE 10和Safari上失败

Question

IE 10支持CORS.Amazon S3支持CORS.

我们在所有浏览器中都有直接从站点到S3的上传工作,但是IE 10(没有使用IE 9-).它的工作原理如下:

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

2. (POST)我们必须在进入S3($.post('/static/sign_asset', { ... })之前"签署"该请求,该回复具有一整天都能完美激活的回调.

3. (POST)然后我们使用文件数据和来自签名的数据将XHR设置为S3.

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

文件上传,一切都在所有浏览器中完美运行,除了......

问题从IE 10开始:

4. 在Access-Control-Allow-Origin标头中找不到Origin null.和XMLHttpRequest:网络错误0x80070005,访问被拒绝.我们response.headers["Access-Control-Allow-Origin"] = "*"在发送响应的控制器中设置后,没有其他浏览器显示此信息.即使我们有这个错误,Chrome也会显示此错误,但请求仍然会通过.

5. 尽管出现此错误,该文件实际上仍会上传到S3.Amazon S3做了303重定向的事情 - 这是我们验证文件是否已成功上传.

6. (GET)这是对CORS Ajax请求的重定向,因此"重定向"不刷新它刚回来的页面并命中我们的服务器.IE 10使用Content-Type进行此请求multipart/form-data; boundary=---------------------------7dd2ce2201da

这就是导致Rails出错的原因.

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很好 - 甚至看起来都没有设置Content-Type

Firefox做得很好 - 内容类型application/json; charset=utf-8

---

有一些示例页面显示IE 10处理CORS的程度,但它们不处理此重定向问题.

Answer 1

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

我们希望依赖于S3的POST功能中内置的303重定向,但事实证明它存在问题,如上所示.相反,我们只是停止使用S3表单字段 success_action_redirect并切换到success_action_status.

对于后代,不要依赖于S3 303的重定向来跨越xhr请求的浏览器一致地工作.如果你这样做,你将花时间与无效的标题,空来源和龙对抗.