web-dev-qa-db-ja.com

IE8 / 9のjQueryおよびXDomainRequestを使用したCORS

UPDATE：多くの制限があり、ひどく貧弱な実装であるため、XDomainRequestに時間を投資しないことを強くお勧めします。基本的には、非SSLサーバーへのGET要求に対してのみ実際に機能するため、jsonpなどを使用することもできます。

CORSを使用してクロスドメインAPIを呼び出していますが、Internet Explorerで問題が発生しています。 IE8およびIE9では、XDomainRequestオブジェクトを介してCORSが可能になりますが、動作させることができません。

JQuery は を拒否してXDomainRequestのネイティブサポートを提供しますが、このサポートを追加するにはいくつかのjQueryプラグインが推奨されます。この トピック は、そのような2つのプラグインを提案します： jQuery.XDomainRequest.js および xdr.js 。これらは機能すると報告されています。ちなみに、プラグインは_jQuery.ajax_の動作を自動的にオーバーライドする必要があります。別のプラグイン が見つかりました 。

CORS対応サーバーへのajaxリクエストを実行するそれぞれのプラグイン jQuery.XDomainRequest および xdr および jquery.ie.cors で小さなデモページを配置します。ページはChromeおよびFirefoxで動作していますが、IE8/9はすぐにアクセス許可拒否エラーをスローします（リクエストを行う前であっても）。この MSDN投稿 は別のハンドラxhr.onprogress = function() {};しかし、私はこれを試しましたが、どちらも機能していません。

私が間違っていることの手がかりはありますか？ IE 8でもMS仮想サーバーを使用してテストしましたが、まったく同じ問題があります。

編集：OKですので、問題の一部は、HTTPS経由でPOSTを使用していたことです。XDomainRequestではHTTPS経由のCORSが許可されていないようです。

Edit2：このストーリーの終わりについては、 github のこの問題を参照してください。 HTTP POSTを使用する場合、xDomainRequestはリクエスト本文（引数）を_text/plain_としてのみエンコードできます。誰もが_application/x-www-form-urlencoded_または_multipart/form-data_を使用するため、これはほとんど価値がありません。

jqueryinternet-explorer-9corsxdomainrequest
62
Jeroen

POSTメソッドがサポートされています。クロスドメインhttps：//リクエストを作成するには、呼び出しページもhttps経由でロードする必要があります。これは、XDomainRequestのこれらの制限およびその他の制限を詳細に説明する、私が見つけた最高の記事です。

http://blogs.msdn.com/b/ieinternals/archive/2010/05/13/xdomainrequest-restrictions-limitations-and-workarounds.aspx

28
Adam Alexander

IE9以下が使用されている場合、プロキシに正常にダウングレードするプロキシを作成しました。 ASP.NETを使用している場合、コードをまったく変更する必要はありません。

ソリューションは2つの部分に分かれています。 1つ目は、jQuery ajax処理にフックするjqueryスクリプトです。 crossDomainリクエストが行われ、ブラウザがIEの場合、Webサーバーを自動的に呼び出します。

$.ajaxPrefilter(function (options, originalOptions, jqXhr) {
    if (!window.CorsProxyUrl) {
        window.CorsProxyUrl = '/corsproxy/';
    }
    // only proxy those requests
    // that are marked as crossDomain requests.
    if (!options.crossDomain) {
        return;
    }

    if (getIeVersion() && getIeVersion() < 10) {
        var url = options.url;
        options.beforeSend = function (request) {
            request.setRequestHeader("X-CorsProxy-Url", url);
        };
        options.url = window.CorsProxyUrl;
        options.crossDomain = false;
    }
});

Webサーバーでは、リクエストを受信する必要があり、X-CorsProxy-Url httpヘッダーとHTTPリクエストを実行し、最終的に結果を返します。

私のブログ投稿： http://blog.gauffin.org/2014/04/how-to-use-cors-requests-in-internet-Explorer-9-and-below/

5
jgauffin

IE8/9の[〜＃〜] cors [〜＃〜]リクエストには、jQueryプラグインを使用できます jquery-transport-xdr

0
Gordon Freeman