JS のクロスドメイン問題の簡単な分析と、ソリューションの長所と短所の比較_JavaScript スキル

クロスドメインとは何ですか?

概念: プロトコル、ドメイン名、ポートが異なる限り、それらは異なるドメインとみなされます。

コードをコピーします コードは次のとおりです:

通信が許可されているかどうかを説明する URL
http://www.a.com/a.js
http://www.a.com/b.js 同じドメイン名で許可されます
http://www.a.com/lab/a.js
http://www.a.com/script/b.js 同じドメイン名の異なるフォルダーが許可されます
http://www.a.com:8000/a.js
http://www.a.com/b.js 同じドメイン名、異なるポートは許可されません
http://www.a.com/a.js
https://www.a.com/b.js 同じドメイン名、異なるプロトコルは許可されません
http://www.a.com/a.js
http://70.32.92.74/b.js ドメイン名とそのドメイン名に対応する IP は許可されません
http://www.a.com/a.js
http://script.a.com/b.js メイン ドメインは同じですが、サブドメインは許可されません
。 http://www.a.com/a.js
http://a.com/b.js 同じドメイン名、異なる第 2 レベル ドメイン名 (上記と同じ) 許可されません (この場合、Cookie へのアクセスは許可されません)
http://www.cnblogs.com/a.js
http://www.a.com/b.js 異なるドメイン名は許可されません

ポートとプロトコルの違いは、バックグラウンドでのみ解決できます。

クロスオリジンリソース共有 (CORS)

CROS (Cross-Origin Resource Sharing) クロスドメイン リソース共有は、クロスドメイン リソースにアクセスするときにブラウザとサーバーが通信する方法を定義します。 CROS の背後にある基本的な考え方は、カスタム HTTP ヘッダーを使用して、ブラウザーがサーバーと通信して、要求または応答が成功するか失敗するかを判断できるようにすることです。

コードをコピーします コードは次のとおりです:

var xhr = 新しい XMLHttpRequest();
xhr.open("GET", "/trigkit4",true);
xhr.send();

上記の trigkit4 は相対パスです。CORS を使用する場合、関連する Ajax コードは次のようになります。

コードをコピーします コードは次のとおりです:

var xhr = 新しい XMLHttpRequest();
xhr.open("GET", "http://segmentfault.com/u/trigkit4/",true);
xhr.send();

このコードと前のコードの違いは、相対パスが他のドメインの絶対パスに置き換えられることです。これは、ドメインを越えてアクセスするインターフェイス アドレスです。

サーバー側は主に Access-Control-Allow-Origin を設定することで CORS をサポートします。ブラウザーが対応する設定を検出すると、Ajax クロスドメイン アクセスを許可できます。

クロスドメインの問題を解決するには、次の方法を使用できます:

jsonp によるクロスドメイン

さて質問です? jsonpとは何ですか? Wikipedia の定義は次のとおりです。 JSONP (JSON with Padding) は、データ形式 JSON の「使用モード」であり、Web ページが他のドメインからデータを要求できるようにします。

JSONP (パデッド JSON とも呼ばれます) は、JSON を適用する新しい方法です。これは、関数呼び出しに JSON が含まれているだけです。次に例を示します。

コードをコピーします コードは次のとおりです:

callback({"名前","trigkit4"});

JSONP はコールバック関数とデータの 2 つの部分で構成されます。コールバック関数は、応答が来たときにページ内で呼び出される関数であり、データはコールバック関数に渡される JSON データです。

js では、XMLHttpRequest を直接使用して、異なるドメイン上のデータをリクエストすることはできません。ただし、jsonp はこの機能を使用してページ上に異なるドメインの js スクリプト ファイルを導入することができます。 例:

コードをコピーします コードは次のとおりです:

関数 dosomething(jsondata){
//取得したjsonデータを処理します
}

">http://example.com/data.php?callback=dosomething">>

js ファイルが正常に読み込まれた後、url パラメーターで指定した関数が実行され、必要な json データがパラメーターとして渡されます。したがって、jsonp はサーバー側ページからの対応する連携を必要とします。

コードをコピーします コードは次のとおりです:

$callback = $_GET['callback'];//コールバック関数名を取得
$data = array('a','b','c');//返されるデータ
echo $callback.'('.json_encode($data).')';//出力
?>

最終的な出力結果は次のようになります: dosomething(['a','b','c']);

ページで jquery を使用している場合、カプセル化されたメソッドを通じて jsonp 操作を簡単に実行できます。

コードをコピーします コードは次のとおりです:

$.getJSON('http://example.com/data.php?callback=?,function(jsondata)'){
//取得したjsonデータを処理します
});

jquery は、callback=? の疑問符を置き換えるグローバル関数を自動的に生成し、データを取得した後に自動的に破棄されます。実際には、これは一時的なプロキシ関数として機能します。 $.getJSON メソッドは、クロスドメインであるかどうかを自動的に判断し、そうでない場合は通常の ajax メソッドを呼び出します。クロスドメインである場合は、js ファイルを非同期にロードする形式で jsonp コールバック関数を呼び出します。

JSONP の長所と短所

JSONP の利点は、XMLHttpRequest オブジェクトによって実装される Ajax リクエストのような同一生成元ポリシーによって制限されないことです。互換性が高く、XMLHttpRequest や ActiveX のサポートなしでも古いブラウザーで実行できます。リクエストが完了したら、コールバックを呼び出すことで結果を返すことができます。

JSONP の欠点は、GET リクエストのみをサポートし、POST などの他のタイプの HTTP リクエストはサポートしないこと、クロスドメイン HTTP リクエストのみをサポートし、異なるドメインの 2 つのページ間で JavaScript 呼び出しを行う方法の問題を解決できないことです。

CROS と JSONP の比較

CORS は間違いなく JSONP よりも高度で、便利で、信頼性があります。

1. JSONP は GET リクエストのみを実装できますが、CORS はすべての種類の HTTP リクエストをサポートします。

2. CORS を使用すると、開発者は通常の XMLHttpRequest を使用してリクエストを開始し、データを取得できます。これにより、JSONP よりも優れたエラー処理が可能になります。

3. JSONP は主に古いブラウザでサポートされていますが、CORS をサポートしていないことが多く、最新のブラウザのほとんどはすでに CORS をサポートしています)。
document.domain

を変更してサブドメインを横断する

すべてのブラウザには同一生成元ポリシーがあり、その制限の 1 つは、最初の方法で、ajax を使用して異なるソースからドキュメントをリクエストできないことです。 2 番目の制限は、js がブラウザー内の異なるドメインのフレーム間で対話できないことです。
異なるフレームワーク間ではウィンドウオブジェクトは取得できますが、対応するプロパティやメソッドは取得できません。たとえば、アドレスが http://www.example.com/a.html であるページがあり、このページには iframe があり、その src は http://example です。 .com/b.html、明らかに、このページとその中の iframe は異なるドメインにあるため、ページに js コードを記述しても iframe のコンテンツを取得できません。

コードをコピー コードは次のとおりです:

関数テスト(){
var iframe = document.getElementById('ifame');
var win = document.contentWindow;//iframe でウィンドウ オブジェクトを取得できますが、ウィンドウ オブジェクトのプロパティとメソッドはほとんど使用できません
var doc = win.document;//iframe 内のドキュメント オブジェクトはここでは取得できません
var name = win.name;//ウィンドウオブジェクトのname属性はここでも取得できません
}

現時点では、http://www.example.com/a.html と http://example.com を追加するだけで済みます。 / b.htmlこれら 2 つのページの document.domain を同じドメイン名に設定するだけです。ただし、document.domain の設定は制限されており、document.domain はそれ自体または上位レベルの親ドメインにのみ設定でき、メイン ドメインは同じである必要があることに注意してください。

1. ページ http://www.example.com/a.html で document.domain:

を設定します。

コードをコピーします コードは次のとおりです:

2. ページ http://example.com/b.html にも document.domain: を設定します。

コードをコピーします コードは次のとおりです:

Document.domain = 'example.com';//このページを iframe にロードし、メイン ページの document.domain と同じになるように document.domain を設定します

document.domain を変更する方法は、異なるサブドメイン内のフレーム間の相互作用にのみ適用できます。