30

IE10はCORSをサポートしています。AmazonS3はCORSをサポートしています。

サイトからS3への直接アップロードは、IE 10以外のすべてのブラウザーで機能します（IE 9-に煩わされることはありません）。それはこのように動作します：

  1. ユーザーがファイルを選択します（ドラッグアンドドロップまたはファイル入力から選択）

  2. （POST）リクエストがS3（）に送られる前に、リクエストに「署名」する必要があります。S3（$.post('/static/sign_asset', { ... }）には、一日中完全に起動するコールバックがあります。

  3. （POST）次に、ファイルデータや署名などのデータを使用してXHRをS3にします。

var xhr = new XMLHttpRequest（）;
//など
var fd = new FormData（）;
//など
xhr.open（'POST'、url、true）;
xhr.send（fd）;

ファイルがアップロードされ、すべてがすべてのブラウザで完全に機能します...

問題はIE10で始まります。

  1. Access-Control-Allow-Originヘッダーにオリジンヌルが見つかりません。およびXMLHttpRequest：ネットワークエラー0x80070005、アクセスが拒否されました。response.headers["Access-Control-Allow-Origin"] = "*"応答を送信するコントローラーを設定した後、他のブラウザーはこれを表示しません。これが間違っていた場合でも、Chromeはこのエラーを表示しますが、リクエストは引き続き実行されます。

  2. このエラーにもかかわらず、ファイルは実際にはS3にアップロードされます。Amazon S3は、303リダイレクトを実行します。これは、ファイルが正常にアップロードされたことを確認するためのものです。

  3. （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は問題ありません-Content-Typeapplication/json; charset=utf-8

IE 10がCORSをどの程度うまく処理できるかを示すサンプルページがありますが、このリダイレクトの問題には対応していません。

4

1 に答える 1

10

CodePenチームメンバーはこちら。私たちはこれを理解しました...

S3のPOST機能に組み込まれている303リダイレクトに依存したかったのですが、上記のように問題があることがわかりました。代わりに、 S3フォームフィールド の使用を停止して、success_action_redirectに切り替えましたsuccess_action_status。

後世のために、xhrリクエストに対してブラウザ間で一貫して機能するためにS3の303リダイレクトに依存しないでください。そうした場合、無効なヘッダー、ヌルのオリジン、ドラゴンとの戦いに時間を費やすことになります。

于 2013-03-18T03:07:18.420 に答える