クロスドメインJSONP共通の問題の解決

起因

お茶を注ぐために...ソースとの間に、今日と言えば、フロントクロスドメインを修正するためにどのように面接を尋ねるインタビュアー耳企業。私の心は静かに一瞬考え、パパPaが即座にそれは非常に一般的な面接の質問ですが、私は、と思ったが、私は開発の過程で午前...いくつかの重要な単語、IFRAME、CORS、同一生成元ポリシー、JSONPを思い付きました本当にこの方法を使用していない...でも、JSONP原理はそれほど悪くは語りました。冷たい汗が、？、かつ迅速に適切な情報を見つけます。

同一生成元ポリシー

同一生成元ポリシーのために、ここで私が負担については説明しません、簡単な言葉で、次の三つ場合：同じプロトコル、同じドメイン名、同じポート満たされていないがあるたびに、ブラウザがします No 'Access-Control-Allow-Origin' header is present on the requested resourceあなたの顔を投げます。

ソリューション

すべての後に、ネットワークと情報セキュリティの保護に重要な役割を果たし、クロスドメインの問題は、フロントエンドの観点から必然的に言ったが、同一生成元ポリシーすることができます。全く同一生成元ポリシーが存在しない場合は、他のページが簡単にクッキーを盗む、とすることができます想像して、あなたの個人情報であなたのクッキーが...そこに恐ろしいですが、クロスドメイン由来の政策課題ももたらしていると言った場合には頭痛、幸い今解決するために多くの方法があります。

CORSクロスドメインリソース共有戦略（
JSONP
window.name
document.domainを（同じ状況下で入手可能なプライマリドメイン）
postMessage（新たに導入されたH5）
WebSocket（同一生成元ポリシーの制約から新たに導入されたH5、とても良いことだ... H5？）
...

他の方法は、1 Xiangjieことではないものを解決するためにより限られたスペースに、ここで、（...まあ実際には、私はそんなに書くことはできません）。

主は、JSONPを付属しています

JSONPそれはJSON with Padding、短いクロスドメインアクセスを解決するために、より一般的な方法です。いくつかのサンプルコードを見てみましょう：

ajax({//此ajax方法是封装了XMLHttpRequest对象实现，具体代码与本文无关就不贴了
  method : 'get',
  url : 'http://127.0.0.1:8787',
  data : {
  'name' : '小明',//此ajax方法会自动将数据以get方式提交
  'age' : 22
  },
  success : function (message) {
    alert(message);
  },
  async : true
})

上記のコードは非常に簡単です、ブラウザが開始非同期AJAXリクエストは、私たちはサーバーのコードを見てみましょう：

app.get('*', function(req, res) {//这里只截取了关键代码
  res.send("测试数据");
});

クリアは、そう〜理解しやすい、何が起こりましたか？

クロスドメイン・エラー

予想したように、ブラウザは、すべて私の顔の上に投棄...
域外の戦いを！JSONPは、外観をバースト-

function showJsonp(obj){
  console.log(obj.message);
}
var url = 'http://127.0.0.1:8787/?func=showJsonp'
var script = document.createElement('script');
script.setAttribute('src',url);
script.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(script);

コードの後ろに - 再び

app.get('*', function(req, res) {
  let callback = req.query.func;
  let content = callback+"({'message':'测试数据2'})";
  res.send(content);
});

結果：

クロスドメインを解決JSONP

すばらしいです！ウォン！完全！勝利！
戦術の波を解析するための時間です-コードを書くときには通常、多くの人々は、ブラウザのスクリプト、iframeタグおよびその他の属性のためなど、SRC、に注意を払っていないことがあり、同一生成元ポリシーの制限ではありません。そして、良い使用にJSONPは、この時点で-私たちは要求を開始したときに、URLは名前の続いfuncたパラメータ、およびこのパラメータは使用されるコールバック関数名の後に必要とされます。
挿入動的に我々scriptのタグ方式は、要求を開始するためのスクリプトタグのsrc属性を使用して、ブラウザは、同一生成元ポリシーの問題に来ることはありません...とデータの要求に応じて構築さ舞台裏はそれを長期鋸？

showJsonp({'message':'测试数据2'})

教えてください！コードは、スクリプトタグ内に挿入された後、何が起こるのだろうか？！
もちろん、すでに定義されてshowJsonp機能の実装ああ〜
ビンゴ、クロスドメインの問題に最適なソリューション~~

遂に

JSONP道互換性があっても、それらのアンティークのブラウザは非常に良いですが、あなたはまた、クロスドメインJSONP方法に問題を解決することができますが、それはまた制限することができ、それが唯一の要求を開始するためのgetの方法を使用することができ、および異なるドメイン間のjsページの何もできないお互いを呼び出します。

：この記事はで再現されたAPE2048➦ https://www.mk2048.com/blog/blog.php?id=hhibk12iakj

起因

同一生成元ポリシー

ソリューション

主は、JSONPを付属しています

遂に

おすすめ