ajaxリクエストはいつも成功しませんか?ブラウザの同源ポリシーとドメイン間問題の詳細

6313 ワード
json p
詳細
要旨:XMLHttpRequest cannot loadhttp://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xiao
シーン
私たちは明ちゃんが業務データを展示する大きなスクリーンを作ってボスに見せなければなりません.中には自分のサイトからのデータと隣の王さんからのデータが含まれています.では、自分のサイトのデータを提供します.http://xiaoming.com/whoamiこのようなデータインタフェースの隣の王さんは提供しました.http://oldwang.com/isdadこのようなデータインタフェースは単独で点灯しても問題ありません.ただしjsのajaxリクエストを使用するとoldwangから受信できない.comのデータです.ブラウザコンソールを開くと、赤字が表示されます(Chrome):
XMLHttpRequest cannot load http://oldwang.com/isdad. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://xiaoming.com/' is therefore not allowed access.



ドメイン間で問題が発生しました
どうしてこんな問題があるの?
もし隣の王さんがあなたを知らないならば、彼のウェブサイトは自分で各種のユーザーインタフェース、注文インタフェース、文章インタフェースを持っていて、誰もがこれらのインタフェースから帰ってきたデータを直接自分のウェブサイトに置くことができて、やはりリアルタイムです.
したがって、ブラウザは、1つのソース(origin)のスクリプトから他のソース(origin)からのリソースを取得することを制限する同源ポリシーを制定します.
同源とは
2つのページが同じプロトコル(protocol:http)、ポート(port:80)、ホスト(host:xiaoming.com)を持っている場合、この2つのページは同じソース(origin)に属します.
ソリューション
ここでは何年も前のiframe、flashなどの方法を話さないで、最もよく使われている案だけをいくつか話します.
A.x.comとB.x.com間のドメイン間
サブドメイン名の違いもドメイン間で制限されます.この問題は最も簡単で、ページをより高度なドメインに宣言するだけでいいです.

  document.domain = "x.com";



最も古典的で、効率的で、ブラウザの互換性の最も良い解決策:JSONP
しかし、致命的な欠点は、非常に高いクロススタンドスクリプト攻撃リスクがあるため、DataVはこのような方法をサポートしていません.
JSONPという名前を見ると、JSONと密接に関係しているドメインをまたぐためのブラックテクノロジーだと思っている人が多いが、実際にはドメインをまたぐ視点から見ると、JSONとは一銭の関係もなく、ブラウザを利用してドメインをまたいでjsをロードするなどのリソースを利用してデータを取得している.
ブラウザはのようなドメイン ロードjsをサポートするので、 で、データをjsにパッケージすることができます.
これはデータです.scriptでデータにロードすると「 」できません.ajaxのコールバック には できません.
{
  "data": 123
}



これはjsスクリプトで、callbackをajaxのコールバック に けるだけで、データをコールバック に えることができます.
callback({
  "data": 123
})



4つの が されます.
、callbackとajaxコールバック のバインドが である. 、データサーバーの が です. 、GET のみをサポートする 、データサーバーが に なスクリプトを できる
フロントエンドがjqueryを する 、jqueryはすでに りプロセス のパッケージを し、 は:1である. しないcallback をランダムに しajaxコールバック にバインドします.1.callback をURLのquery stringに れる、 えばhttp://oldwang.com/api?callback= jQuery214015557975923291245_1460532274390.のラベルを する、 URLをsrc 1とする.データのロードを ってajaxのコールバック にデータを
バックエンドはphpを に、ブラウザからcallbackパッケージデータとして されたパラメータを する です.



ほとんどの しいブラウザで のあるCORS(Cross Origin Resource Sharing)
の は の さんが からブラウザに「 ちゃんを めないで、 たちは です......」と ったので、 も な は、データサーバーが したヘッダ に まれています.
Access-Control-Allow-Origin: http://xiaming.com



しかし、このヘッダ は をサポートしていません. の さんの が すぎると、PHPを に げると、プログラムを じてこのヘッダ を に するしかありません.



さんがいい として たら、 ることはありません.では、 *を うことができます.
Access-Control-Allow-Origin: *



Cookies
CORSのデフォルトはクッキー を たないので、クッキーを っていくにはwithCredentialsパラメータを する がある は、jqueryを に げます.
$.ajax({
    url: "http://laowang.com/isdad",
    xhrFields: {
      withCredentials: true
    }
  });



サーバにはCredentialsを するヘッダ と、 のコードのようなワイルドカード「*」を しないヘッダ も する があります.



これが の さんの です.
ajax ？ _ 1 ​​​​​​​
テキストリンク
C++ベース-シンプルで強力なbitset
自動化ツールの比較