ドメイン間およびドメイン間ソリューション

2571 ワード
ドメイン間とは?ドメイン間とは、あるドメインのドキュメントまたはスクリプトが、別のドメインのリソース同源ポリシー、すなわち、同じプロトコル、同じドメイン名、同じエンドスローガンを要求しようとしていることを意味します.いずれかが満たされない場合、リクエストはドメイン間で問題が発生します.
同源ポリシーでは、1、Cookie、LocalStorage、IndexDBが読み取れない2、DOM、Jsオブジェクトが取得できない3、AJAXリクエストが一般的なドメイン間シーンを送信できないことを制限します.
URL                                                                  
http://www.8083.com/a.js
http://www.8083.com/b.js             ，                    
http://www.8083.com/lab/c.js

http://www.8083.com:8000/a.js
http://www.8083.com/b.js             ，                       
 
http://www.8083.com/a.js
https://www.8083.com/b.js            ，                       
 
http://www.8083.com/a.js
http://127.0.0.1/b.js                    ip                 
 
http://www.8083.com/a.js
http://x.8083.com/b.js               ，                       
http://8083.com/c.js
 
http://www.8082.com/a.js
http://www.8081.com/b.js

ドメイン間ソリューション1、jsonpドメイン間2、document.domain+iframeドメイン間3、location.hash+iframe 4、window.name+iframeドメイン間5、postMessageドメイン間6、ドメイン間リソース共有(CORS)7、nginxエージェントドメイン間8、nodejsミドルウェアエージェントドメイン間9、WebSocketプロトコルドメイン間1、jsonpドメイン間1、通常はウェブサーバの負荷を軽減するために、js,css,imgなどの静的リソースを別の独立したドメイン名のサーバに分離し,htmlページで対応するラベルを介してドメイン名から静的リソースをロードすることをブラウザに許可され,この原理に基づいてscriptを動的に作成し,ドメイン間通信を要求することができる.
1、原生実現:

    var script = document.createElement('script');
    script.type = 'text/javascript';

    //             onBack
    script.src = 'http://www.demo2.com:8080/login?user=admin&callback=onBack';
    document.head.appendChild(script);

    //       
    function onBack(res) {
        alert(JSON.stringify(res));
    }

サービス側は、次のように返します(戻るとグローバル関数が実行されます).
onBack({"status": true, "user": "admin"})

2、jquery ajax: 
$.ajax({
    url: 'http://www.demo2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  //      jsonp
    jsonpCallback: "onBack",    //         
    data: {}
});

3、vue.js 
this.$http.jsonp('http://www.demo2.com:8080/login', {
    params: {},
    jsonp: 'onBack'
}).then((res) => {
    console.log(res); 
})

実はjsonpの全体の過程はフロントエンドが1つの関数を宣言したのと似ていて、バックエンドは実行関数を返します.実行関数パラメータに必要なデータ1、ローカルで定義されたサービス側コールバックのfunction関数(サービス側がこの関数を呼び出してクエリのデータをパラメータ形式でこの関数に転送する)2、scriptにはサーバスクリプトが含まれており、ローカルで定義されたfunction関数の数名を渡し、データを取得して呼び出す3、異種のアドレスでローカルのjs関数を呼び出し,functionで関数を処理する.jsonpの欠点:getの1つのリクエストしか実現できません
s:selectの使い方
Python-excel指定セルのデータをtxtに抽出