Ajaxクロスドメイン問題と解決案
4468 ワード
なぜクロスドメイン問題が発生しましたか?
ドメインをまたぐと、ブラウザが他のサイトのスクリプトを実行できないということです.これはブラウザの同ソース戦略によってもたらされたもので、JavaScriptに対するブラウザのセキュリティ制限です.
原生ajaxはインターフェースを要求する時、使用するのがローカルサーバです.プロトコルが異なるhttp https ホスト名が一致しません.local host 127.1 SP 0.baidu.com 124.3.3.2 ポート番号が一致しません. エラーAccess-Coontrol-Originはクロスドメイン を生成します.
ajaxドメインをまたぐ問題に遭遇しました.ブラウザのエラーは以下の通りです.
XMLHttp Request cannot load http:/目標アドレスNo‘Access-Coontrol-Origin’header is present on the requested reource.Origin‘http:/現在ページアドレス’is therefore noallowed access.
越境問題を解決する
1.ros.csクロスドメイン(ドメイン間リソース共有)
バックエンドjava php nodeで構成されたレスポンスヘッドheader(「Access-Coontrol-Origin」);すべてのアクセスを許可します.特定のドメインを指定する必要があればドメインを越えてアクセスすることができます.Access-Coontrol-Origin:*をAccess-Coontrol-Origin-Origin:に変更します.許可されたドメイン名です.
2.jsonpドメインをまたぐ(元の生ではないajaxはすべてget要求である)
jsonpがドメインをまたぐ問題を解決する原理は、ブラウザのscriptタグは同一ソースポリシーによって制限されないので、scriptタグの中で任意のドメイン名の下のリソースファイルにアクセスできます.この特性を利用して、scriptタグでサーバからデータを要求します.同時にサーバーは方法とデータがあるjsコードを返します.完成を要求しました.ローカルのjsメソッドを呼び出して、データを完成します.jsonとjsonのフォーマットの違いを比較してみます.
jsonpの欠点:1、JSONPは非公式的な方法であり、この方法はGET方法だけをサポートしています.POST方法より安全です.(メカニズムを実現すれば分かります.)2、JSONPの実現にはサーバーの協力が必要です.第三者のサーバーにアクセスする場合、サーバーを修正する権限がありません.このような方法はいけません.
ドメインをまたぐと、ブラウザが他のサイトのスクリプトを実行できないということです.これはブラウザの同ソース戦略によってもたらされたもので、JavaScriptに対するブラウザのセキュリティ制限です.
原生ajaxはインターフェースを要求する時、使用するのがローカルサーバです.
http://localhost:63342/main/index.html
https://sp0.baidu.com/s?wd=1
不一致は国境を越えるajaxドメインをまたぐ問題に遭遇しました.ブラウザのエラーは以下の通りです.
XMLHttp Request cannot load http:/目標アドレスNo‘Access-Coontrol-Origin’header is present on the requested reource.Origin‘http:/現在ページアドレス’is therefore noallowed access.
越境問題を解決する
1.ros.csクロスドメイン(ドメイン間リソース共有)
バックエンドjava php nodeで構成されたレスポンスヘッドheader(「Access-Coontrol-Origin」);すべてのアクセスを許可します.特定のドメインを指定する必要があればドメインを越えてアクセスすることができます.Access-Coontrol-Origin:*をAccess-Coontrol-Origin-Origin:に変更します.許可されたドメイン名です.
:response.setHeader(“Access-Control-Allow-Origin”,”http://www.client.com”);
要求されたResonse Headerに下記のコードを追加します.//
response.setHeader("Access-Control-Allow-Origin", "*");
//
response.setHeader("Access-Control-Allow-Methods", "POST");
//
response.setHeader("Access-Control-Allow-Headers", "x-requested-with,content-type");
このようなクロスドメインソリューションは、ブラウザがH 5をサポートする必要があります.これはHTML 5のクロスドメイン方式です.製品がPC端末に向いているなら、この方式はいい解決策ではないかもしれません.もし携帯端末に向いているなら、この方法は簡単で乱暴な良い方法ではないです.2.jsonpドメインをまたぐ(元の生ではないajaxはすべてget要求である)
jsonpがドメインをまたぐ問題を解決する原理は、ブラウザのscriptタグは同一ソースポリシーによって制限されないので、scriptタグの中で任意のドメイン名の下のリソースファイルにアクセスできます.この特性を利用して、scriptタグでサーバからデータを要求します.同時にサーバーは方法とデータがあるjsコードを返します.完成を要求しました.ローカルのjsメソッドを呼び出して、データを完成します.jsonとjsonのフォーマットの違いを比較してみます.
json :
{
"message":" ",
"state":"1",
"result":{
"name":" 1","id":1,"description":"11"}
}
jsonp :
callback({
"message":" ",
"state":"1",
"result":{
"name":" 1","id":1,"description":"11"}
})
フォーマットから見れば、jsonはjsonに基づいて一つの方法名を包装しました.この方の法名は先端要求から伝わってきました.要求住所は:http://localhost:9999/tookApp/tbk/getItem?callback=JSONP_CALLBACKでは、方法名はJSONP_CALLBACKです.jsonpの欠点:1、JSONPは非公式的な方法であり、この方法はGET方法だけをサポートしています.POST方法より安全です.(メカニズムを実現すれば分かります.)2、JSONPの実現にはサーバーの協力が必要です.第三者のサーバーにアクセスする場合、サーバーを修正する権限がありません.このような方法はいけません.