jsonp

、なぜクロスドメインなのか

ブラウザは、同じ起源のポリシーは、彼はまた、最もコアなコンテンツだけでなく、セキュリティの最高の保証である大会です。このような制限がない場合を想像すると、ページが同時にロードされたjsファイルの下にaとbの2つのドメインは、その文書とクッキー情報を共有されている、つまり、aは情報の下にbのドメインを取得することができ、その逆bは情報の下にドメインを取得することができます、このような結果は非常に恐ろしいです！

同じソースの概念

どちらのページもプロトコル、ホスト、ポート番号は同じです。以下のコードをコンソールにコピーして実行し、結果を見ることができます。

 console.log(location.protocal); // 現在のページのプロトコルを表示する
 console.log(location.hostname); // ドメイン名の現在のページを表示する
 console.log(location.port); // 現在のページアクセスのポート番号を表示する

ポート番号は主に80（http）、443（https）です。

jsonpの実装原理

jsonpの実装は、実際にはヘッダにscriptタグを挿入し、ウィンドウにメソッドを追加します。スクリプトのリクエストが返ってくると、返された内容が実行されます。戻り値はウィンドウに追加されたメソッドです。

例えば

メソッドセットがjsonpCb1であり、インターフェイスによって返される実際のデータがhello worldである場合、ロードされたリクエストによって返される実際のデータはjsonpCb1('hello world')です。

jsonp実装メソッド

 let count = 0; // すべてのリクエストのコールバック関数が同じでないことを保証するために、カウンタを展開することができる
 function jsonp(url, params, callback){
 let script = document.createElement('script');
 let cb = `callback${count++}`; // 実際のバックエンドは、このパラメータに応じてメソッドの名前を返す
 url += url.includes('?') ? `&callback=${cb}` : `?callback=${cb}`;
 script.src = url;
 function clean() {
 script.parentNode.removeChild(script); // スクリプトタグを削除する
 window[cb] = null; // コールバック関数をnullに設定する
 }
 // 実際のリクエストは、データを取得することに成功した
 window[cb] = result => {
 cleanup();
 callback(null, result);
 }; // リクエストのレスポンス
 // リクエストエラーのリスニング
 script.onerror = function(e) {
 cleanup();
 callback(e, null);
 };
 document.head.appendChild(script); // domに挿入され、実際のリクエスト
 }

上記はおそらく単純なjsonpリクエストを実装したもので、実際にはタイムアウトやその他のパラメータを設定することもできます。