クロスドメインとは何ですか？
このブログは非常に明確に説明し、私が直接引用https://blog.csdn.net/lambert310/article/details/51683775
クロスドメイン、ブラウザを参照すると、スクリプトに他のサイトを実行することはできません。これは、ブラウザの同一生成元ポリシーによって引き起こされ、課されたブラウザのセキュリティ制限があります。
いわゆる相同であれば、異なる、すなわち、クロスドメインが存在するように、同一であるドメイン、プロトコル、ポートを指します。栗を与え、それは問題ではありません理解していません。
http://www.123.com/index.html呼び出すhttp://www.123.com/server.php（非クロスドメイン）
http://www.123.com/index.html http://www.456.com/server.phpを呼び出し（別のメインドメイン：456分の123、クロスドメイン）
http://abc.123.com/index.html呼び出すhttp://def.123.com/server.php（サブドメイン異なる：ABC / DEF、クロスドメイン）
http://www.123.com:8081/server.phpを呼び出します（異なるポート：8081分の8080、クロスドメイン）http://www.123.com:8080/index.html
http://www.123.com/index.html https://www.123.com/server.phpを呼び出す（異なるプロトコル：HTTP / HTTPS、クロスドメイン）
ご注意：localhostを127.0.0.1とポイントものの、マシンにするだけでなく、クロスドメインを。
ブラウザのJavaScriptのスクリプトを実行すると、スクリプトがページに相同ではない、それは実行されません場合は、どのページに属してチェックします。
何がクロスドメインの操作を防ぎますか？
ブラウザは、二つの側面からのインターフェイスのための1つのリクエストを同一生成元ポリシーを行うことです、第二は、ドムのためのクエリです
そのようなhttp://192.168.100.150:8081/zhxZone/webmana/dict/jsonpにAJAX実験/jsonp.htmlページを使用するなど、要求がよりよく理解されている1ストップインターフェース、http://192.168.100.150:8020/からの要求を開始します別のURLによる2つのポート、いいえ「アクセス制御 - 許可原点」ヘッダは、要求されたリソース上に存在する印刷ステーションコンソールに報告されるクロスドメインが属するように
これは、ブラウザがユーザーに要求リターンを防ぐためものの表示し、データを操作すると言って価値があるが、ブラウザが実際に尋ねるために起こっている、そしてサーバーがネットワークデバッグモードでデータを返します。そうする制限をしない場合は、リターン・ステータスで見ることができています200、および戻り値のデータを見ることができます
2. DOM取得と操作を防ぎます
ます。https：//blog.csdn.net/lianzhang861/article/details/84870484取得モードの参照でiframeオブジェクトについて
このようなページに埋め込まIFRAME、Bの異なるソースのsrcページとして、そしてB、DOMのCSSスタイルを変更する方法はありません、操作bのDOMではありません。
ABは、相同である場合には言葉が取得して動作させることができます。
<HTML>
<HEAD>
<メタのcharset = "UTF-8">
<タイトル> </タイトル>
<スタイルタイプ= "テキスト/ CSS">
IFRAME {
幅：100％;高さ：800ピクセル。
}
</スタイル>
</ HEAD>
<BODY>
<！ - <IFRAMEのSRC = "http://192.168.100.150:8081/zhxZone/webmana/attachment/imageManager" FRAMEBORDER = "0" ID = "IFRAME"> </ iframe>の- >
<IFRAME SRC = "http://192.168.100.150:8020/实验/jsonp.html" FRAMEBORDER = "0" ID = "IFRAME"> </ iframe>の
<スクリプトタイプ= "テキスト/ javascriptの">
VAR I =のdocument.getElementById（" IFRAME "）;
i.onload =関数（）{
/*console.log(i。
VaRのB = i.contentWindow.document.getElementsByTagName（ "身体"）[0];
i.contentWindow.document.getElementById（ "テキスト"）style.background = "グレー"。
。i.contentWindow.document.getElementById（ "テキスト"）のinnerHTML = "111"。
}
</ SCRIPT>
</ body>
</ HTML>
改变了IFRAME中的元素
IFRAMEはクッキーにしても得ることができ
VAR I =のdocument.getElementById（ "IFRAME"）;
i.onload =関数（）{
にconsole.log（i.contentDocument.cookie）
}
ブラウザは非相同オペレーティングDOMを防ぐことができますので、これは非常に危険です言うまでもなく
ブラウザの制限は、完全な安全性を保証するが、性的暴行の難しさを増加しますありません
セキュリティは非常に良いですが、あなたは悪者の侵略に抵抗することができますが、時には我々は、また、ブラウザによってブロックされ、独自のクロスドメインデータ要求インタフェースを必要とするか、独自のDOMを操作するので、我々は、クロスドメインが必要
前提はあなたがグループです確かにクロスドメインとサーバーでは、サーバーから返されたデータを制御することができ、またはクロスドメインを完了することはできません
クロスドメインの溶液：
フロントエンドを使用する方法であってJSONP
ドメイン間JSONPフロントエンド・ソリューションは、最も実用的な方法であります
原理は、スクリプトのsrc属性ができ、HTMLリンク、HREF、SRC属性は、hrefのは、カジュアルなURLにリンクすることができ、画像SRC無料の写真を参照するには、リンクがリモートCSSファイルを呼び出すことができるクロスドメインによって影響されませんでランダムJSファイルの異なるソースの導入
以下のコードを参照してください、関数func1のa.htmlページが印刷パラメータのRETの方法を含み、
<BODY>
<スクリプトタイプ= "テキスト/ javascriptの">
関数func1の（RET）{
にconsole.log（RET）
}
</ SCRIPT>
<スクリプトSRC = "http://192.168.100.150:8081/zhxZone/webmana/dict /jsonp.js」タイプ= "テキスト/ javascriptの"文字セットが= "UTF-8"> </ SCRIPT>
</ BODY>
而引入的jsonp.js中的代码为。
関数func1（111）
一つは、結果が111をプリントアウトされます想像することができるが、そのページがデータjsonp.jsを取得すると言うことです、データをデータ化する方法とパラメータを呼び出しているに戻りました
しかし、このデータを取得し、あなたがそのトラブルの多くは、JS同じメソッド名とメソッド名a.html参照する必要があり、それがバックグラウンドに渡された動的なメソッド名をa.htmlに最も適している、背景には、メソッド名の導入に戻ります。あなたが受信メソッド名によって制御されないように、私は、メソッド名を持つ背景を渡します
正常な受信インタフェースのような曲であるためには、要するに、背景がJSコードに戻って戻ります
今、動的メソッド名に：インターフェイスのコールバックパラメータは、メソッドの名前がfunc1の値を私の要求を渡します
<BODY>
<スクリプトタイプ= "テキスト/ JavaScriptを">
関数func1の（RET）{
にconsole.log（RET）
}
</ SCRIPT>
<SCRIPT SRC =「http://192.168.100.150:8081/zhxZone/webmana/dict / JSONP？コールバック=関数func1 "タイプの="テキスト/ JavaScriptを"文字セット=" UTF-8「> </ SCRIPT>
</ body>の
舞台裏、異なるプログラミング言語を返す私は、Javaを使用していますので、私は、Javaで返されているものをお見せ方法
// JSONP测试
@ResponseBody
@RequestMapping（= "JSONP"、=を生成した値と"text / plain; charset = UTF-8"）
公共無効JSONP（文字列のコールバック、HttpServletRequestのreqは、HttpServletResponseの解像度）{
一覧<地図<文字列、オブジェクト>>一覧=新しいのArrayList <地図<文字列、オブジェクト>>（）;
RetBase RET =新しいRetBase（）;
してみてください{
するres.setContentType（ "text / plainの"）;
res.setHeader（ "プラグマ"、 "いいえキャッシュ"）;
res.setHeader（ "のCache-Control"、 "キャッシュなし"）。
res.setDateHeader（ "有効期限"、0）;
地図<文字列、オブジェクト>のparams =新しいHashMapの<文字列、オブジェクト>（）;
リスト= dictService.getDictList（paramsは）。
ret.setData（リスト）;
ret.setSuccess（真の）;
// JSONObject resultJSON = JSONObject.fromObject（RET） ; // 必要アセンブリJSON
out.printlnを（コールバック+ "（" + JSON.toJSONString（RET）+ "）"）; //データフォーマットJSONP返し
out.flushを（） ;
out.close（）;
}キャッチ（例外E）{
e.printStackTrace（）;
}
}
返さI「関数func1（データ）」コードに対応するJavaコード上、印刷データを返す正常クロスドメイン要求を完了する
ジョブコードが面倒である。ここで、各要求データJSも導入され、フロントエンドは、動的に生成されたスクリプトタグのコードを最適化し続けることができます
<スクリプトタイプ= "テキスト/ JavaScriptを">
関数func1の（RET）{
にconsole.log（RET）
}
VAR URL = "http://192.168.100.150:8081/zhxZone/webmana/dict/jsonp?callback=func1"。
S =のdocument.createElementのVAR（ "スクリプト"）;
s.setAttribute（ "SRC"、URL）;
document.getElementsByTagName（ "ヘッド"）[0] .appendChild（S）;
</ SCRIPT>
このように、クロスネイティブJSONPドメインは基本的に完了したが、非常に使いやすいではありません
私が使用するのは比較的簡単で、jqueryのパッケージJSONPを使用することをお勧めします
使用同様の使用とアヤックスが、データ型はJSONPになり、増加JSONPパラメータ、パラメータは、前述のコールバックパラメータの値が有効であると自動的に自動的にあなたの背景に渡された名前を付けJQので、彼をコントロールする必要がある、としないであなたはコールバック関数の生成を助けると成功を呼び出すメソッドを属性のデータが取り出され、
JQ JSONP標準文言：
$アヤックス（{
タイプ： '取得'、
URL： "http://192.168.100.150:8081/zhxZone/webmana/dict/jsonp"、
データ型： 'JSONP'、
JSONP： "コールバック"、
非同期：trueの場合、
データ：{
}、
成功：関数（RET）{
にconsole.log（RET）
}、
エラー：関数（データ）{
}
}）。
JQ JSONP的简便写法：
.getJSON $（ "http://192.168.100.150:8081/zhxZone/webmana/dict/jsonp?callback=？"、関数（RET）{
にconsole.log（RET）
}）
背景がコールバックパラメータを受信し、自身のJQ名前から
このような使用と同じようにスムーズにAJAX、および値は、操作の成功に戻ったが、クロスドメインであります
ここでは類似点と相違点AJAXとJSONPのためのいくつかの追加の説明を行うには：
この2つの技術上の。1、およびJSONPアヤックスは、オブジェクトのように「見える」と呼ばれている、あまりにも、要求URLで、サーバーは、データを返すアヤックスのフレームと考えて処理するので、jQueryのJSONPでありますパッケージの形。
2、しかし、AJAXとJSONP実際に何か異なる性質。コアが動的JSONPを添加しながら、AJAXは、XmlHttpRequestのことで、このページ上の非中核コンテンツを取得することです
クロスドメイン構成を解決するための背景
JSONP最高のクロスドメインでのフロント・エンドのソリューションを言うが、私は、背景設定を構成することを好みます
私は、Javaを使用するためにも、すべての私は、javaの設定を列挙することができます
私はMavenを使用して、春のMVC
最初のpom.xmlに依存関係を導入
<！ -跨域依赖- >
<依存>
<groupIdを> com.thetransactioncompany </ groupIdを>
<たartifactId> CORS-フィルタ</たartifactId>
<バージョン> 1.7.1 </バージョン>
</依存関係>
<依存>
<groupIdを> com.thetransactioncompany </ groupIdを>
<たartifactId>のjava-プロパティ-utilsの</たartifactId>
<バージョン> 1.9 </ version>の
</依存関係>
<依存>
然后在web.xmlの配置过滤器
<！ -クロスドメインアクセスを可能にするために- >
<フィルタ>
<フィルタ名> CorsFilter </フィルタ名>
<フィルタクラス> com.thetransactioncompany.cors.CORSFilter </フィルタリングクラス>
</フィルタ>
<マッピング・フィルタ>
<フィルタ名> CorsFilter </フィルタ名>
の<url-pattern> / * </ URLパターン>
</のfilter-mapping>
あなたは、クロスドメインリクエストデータの遠位端を楽しむことができますので、それは非常に便利ではありません？
プロジェクトは、ログインフィルタするかどうかを検出するように構成されている場合、すべての時間の兆候がないため、ログインインターフェイスにジャンプし、その後、紛争であってもよいことに注意してください。。。
ここでは、その後、これらの方法には限界があり、特別なシーンの目的があるクロスドメイン、クロスドメインを解決するためにいくつかの方法であるはずです
3. document.domainをを変更することにより、サブドメインに出くわします
クロスドメインDOMの動作態様に関連しているため、このメソッドは、値を導入してい
上記の方法は、唯一のクロスドメインリクエストを解決することができますが、私は動作条件が厳しいですたかったので、クロスドメインの運用DOM、DOMを解決することはできません、2人のドメイン名が同じベースドメイン名に属している必要があります！そして、使用されるプロトコルと一致するように、ポート持っています
これは、この記事でhttps://segmentfault.com/a/1190000005863659導入しています
@（StuRep）
document.domainを
、現在のページのドメイン名を取得するために使用。
たとえば、アドレスバーのタイプ：
：次のようにコードは
JavaScriptを：アラート（document.domainを）; //www.jb51.net
我々は、プロパティの割り当てをdocument.domainを与えることができますが、限界があり、あなたは、現在のドメイン名またはドメイン名の基礎としてそれを割り当てることができます。
例えば：
コードは以下の通りである：
JavaScriptの：アラート（document.domainを= "jb51.net"）; //jb51.net
のJavaScript：アラート（document.domainを= "www.jb51.net"）; //www.jb51.net
割り当て上記www.jb51.netは、ドメイン名が基礎jb51.netで、現在のドメイン名であるので、彼らは、成功しています。
しかし、次の代入はエラー「パラメータが無効である」出てくるだろう。
コードは次のとおりです：
JavaScriptの：警告（document.domainを= "cctv.net"）; //無効なパラメータ
のjavascript：警告（document.domainを= "www.jb51.netを "）; //無効なパラメータ
cctv.netとWWWので。 jb51.netない現在のドメイン名は、現在のドメイン名の基準ではありませんので、エラーが発生します。これは、クロスドメインのデータを盗む達成するために不正に変更が加えdocument.domainをされるのを防ぐことです。
document.domainをを使用すると、クロスドメインを達成：
前提条件：2人のドメイン名が同じベースドメイン名と使用されるプロトコルに属している必要があり、ポートが一致していなければならない、そうでない場合は！document.domainをクロスドメインを使用することはできません
安全上の理由のためのJavascript 、異なるドメインの2ページ以上の各動作を禁止します。
ページと同じドメインには、各操作の時には何の問題もありません。
例えば、中：ページ（b.html）にbbb.comの使用はiframeを紹介するウェブページ（a.html）のaaa.com。
その後、a.html内部b.htmlの内容を見ることができますが、それを動作させるためにはJavaScriptを使用することはできません。操作前に、異なるドメインに属するこれらの2つのページなので、jsのドメインは、2つのページを検出し、それらが等しい場合、操作は許可されている等しい等しくない場合、操作は拒否されます。
同じドメインにJSのa.htmlとb.htmlを使用することはできません。彼らは、ドメイン名に基づいているので同じではありません。（JSがドメインと同等にそれらを強制し、上記と同じで報告されます「無効なパラメータエラー。」）
aaa.comがa.html年後に別のページで紹介している場合ドメインが同じであるのでそこで、我々は、この問題は発生しません。
別のケースがあり、二つのサブドメイン：
aaa.xxx.com
bbb.xxx.com
AAA（b.html）ウェブページ内のBBB導入ウェブページ（a.html）内部、
その後に同じa.html b.htmlコンテンツは、内部に動作することはできません。
document.domainを同じではないので、一つはaaa.xxx.comであり、他方はbbb.xxx.comです。
そして、私たちは同じに、ドメインの2つのページをJavascriptを介しことができ、
あなたはでa.htmlにb.htmlに参加している必要があります。
コードは以下の通りである：
document.domainを=「xxx.com」、
2つのページが相互に動作することができます。それは同じベースドメイン名の間の「クロスドメイン」を達成するために、です。
クロスドメインwindow.name 4.
https://blog.csdn.net/u013558749/article/details/56968333
HTML5の新しい手法の導入によるクロスドメインの送信データのwindow.postMessage
これは主にクロスドメイン、または複数のIFRAMEはiframe Windowsメッセージ配信、比較的狭いクロスドメインの間を通過する親メッセージのために使用されます。例えば、画面の内容を変更し、表Bページは自動的にあなたがこれを使用することができます保存]をクリックした後にリフレッシュします。または親は、クロスドメインの状況のイベントで子供を取得することはできませんが、間接的にメッセージパッシングを経由してイベントに取得することができ、子供はiframeイベントを行いました。
前提：当事者がクロスドメインおよびクロスドメインであることは、あなたがコントロールすることができるということです、当事者がメッセージを送信するために書いた、メッセージを受信するために他の方法を書きます
同じウィンドウオブジェクト上にある必要があり、このクロスドメインの制限は、それがメッセージを送信するためにどのウィンドウと言うことであることに注意してください、これだけのウィンドウを受信することができます。
主な構文：
メッセージを送ります
window.postMessage（メッセージ、targetOriginに）
メッセージをリスンし、受信
window.parent.addEventListener（ "メッセージ"機能（RES）{
にconsole.log（RES）
}）
これで詳しく見https://blog.csdn.net/lianzhang861/article/details/100031166
そのシナリオと考慮事項について詳述しています
6. CORSにより、クロスドメインを解決
CORSの基本的な考え方は、要求または応答の成功を決定するために、ブラウザとサーバがお互いを知ることができるように、カスタムHTTPヘッダーを使用することです。
*この事実、及び第二の方法（バックグラウンド設定）が実質的に同じである、フィルタ応答を介してリターンヘッダにあるそのサーバと相互運用可能なブラウザ
アクセス制御は許起源を：指定されたドメインにアクセスすることを許可
アクセス制御が許方法：メソッド（GET、POST、PUT、DELETE 、OPTIONS、 承認のためなど、）要求を
ドメインへのアクセスを許可さの単一のセット（またはすべて）に適した、すべての構成は特に単純な、固定されています。NORリクエストの種類に応じて異なる行います
Javaメソッドは、リストにまだあります。。。
まず、独自のフィルタを作成しCORSFilter
パッケージcom.xxx.common.filter。
輸入org.springframework.stereotype.Component。
輸入org.springframework.web.filter.OncePerRequestFilter。
輸入れるjavax.servlet.FilterChain。
輸入javax.servlet.ServletException;
インポートのjavax.servlet.http.HttpServletRequest;
インポートのjavax.servlet.http.HttpServletResponse;
インポートにjava.io.IOException;
/ **
* 2018年12月7日に12143によって作成されます。
* /
@Component
パブリッククラスCORSFilterはOncePerRequestFilterが{延び
@Overrideは
空隙doFilterInternal（HttpServletRequestのリクエスト、HttpServletResponseの応答れるFilterChainフィルターチェーン）を保護ServletExceptionが、IOExceptionが{スロー
Response.AddHeader（ "アクセス制御-許可-起源"、 "http://192.168.100.150:8020"）;
//response.addHeader("Access-Control-Allow-Origin "" *「）;
レスポンス。 addHeader（「アクセス制御-許可-メソッド」、「GET、POST、PUT、DELETE」）;
Response.AddHeader（「アクセス制御-許可-ヘッダ」、「タイプ・コンテンツ」）;
Response.AddHeader（「アクセス年齢マックス-コントロール"" 1800 "）; // 30分
FilterChain.doFilter（要求、応答）;
}
}
注：、*すべてのURLへのアクセスを許可するアクセス制御が-起源が許可する場合は" http： //192.168.100.150:8020「のみ、このURLにアクセスするには、ポートがあるが、ポート上で書かれていることに注意しなければならない
だけhttp://192.168.56.130:8081することができ、その後、そのようhttp://192.168.56.130:8081の設定などデータを取得し、それ以外の全ての異常403報告
このフィルタは、その後、web.xmlに追加されました
<フィルター>
<フィルタ名> CorsFilter </フィルタ名>
<フィルタクラス> com.xxx.common.filter.CORSFilter </フィルタリングクラス>
</フィルタ>
<フィルタマッピング>
<フィルタ名> CorsFilter </フィルタ名>
の<url-pattern> / * </のurl-pattern>
</のfilter-mapping>
完成
7. nginxのリバースプロキシ経由
のアクセス制御 - 許可 - 起源のためのブラウザのサポートによるクロスドメイン法について。しかし、いくつかのブラウザはサポートしていませんので、これが最善の解決策ではなく、今は会うために、プロキシブラウザの同一生成元ポリシーを逆にnginxのことでクロスドメインを利用する必要があります！
ここで、参照設定nginxの有効COSRです
＃
＃nginxのためのワイドオープンCORSの設定
＃の
位置/ {
IF（$ REQUEST_METHOD = 'OPTIONS'）{
はadd_header 'アクセス制御-原点を許可' '*'。
add_header 'GET、POST、OPTIONS' 'アクセス制御-方法を許可';
＃1
＃カスタムヘッダと*とOKすることなく、あるべきで*さまざまなブラウザをヘッダ
＃の
X-要求-では、ユーザエージェント、キープアライブ、はadd_header 'アクセス制御-許可-ヘッダ'「DNT、X-CustomHeader、変更-開始、のCache-Control、Content-Typeの';
＃
＃この前のフライト情報は、20日のために有効であることをクライアントに知らせる
＃1
はadd_header「アクセス制御-マックス・エイジ」1728000。
add_header 'Content-Typeの' 'text / plainでのcharset = UTF-8';
204を返します。
}
IF（$ REQUEST_METHOD = 'POST'）{
はadd_header 'アクセス制御-許可原点' '*'。
add_header 'GET、POST、OPTIONS' 'アクセス制御-方法を許可';
add_header 'アクセス制御-許可-ヘッダ' 'DNT、X-CustomHeader、キープアライブ、ユーザエージェント、X-要求-では、変更される場合は-以来、のCache-Control、Content-Typeの';
}
{（$のREQUEST_METHOD = 'GET'）場合
はadd_header 'アクセス制御-許可原点' '*'。
add_header 'GET、POST、OPTIONS' 'アクセス制御-方法を許可';
add_header 'アクセス制御-許可-ヘッダ' 'DNT、X-CustomHeader、キープアライブ、ユーザエージェント、X-要求-では、変更される場合は-以来、のCache-Control、Content-Typeの';
}
}