発行日：2019年8月15日
クロスドメインの警告の発生
ブラウザの要求がインターセプトされ、あなたが原因フロントエンドと同じではない、この時点でバックエンドサービスのアドレスとサービスアドレスに、分離プロジェクトの終了前後にいくつかの操作を行う場合は、問題が発生する可能性があり、ブラウザは現在のことを検出しますページが開始した現在のドメインに属していない要求があるため、「同一生成元ポリシー」ブラウザ、ブロックされます。
だから、相同戦略は何ですか？
ページを制限するために使用される元ポリシーは、異なるドメイン（ソース）の増加、セキュリティの要求のための要求を開始します。
プロトコル、ポート、IPアドレス（ドメイン名）の2つのページが同じであれば、それは2つのページに相同で、それは、同じドメインです。例：
http://192.168.10.1:8080/index.htmlで制御源として
http://192.168.10.1:8080/auth/login.htmlとで相同、
http://192.168.10.1:8181 /index.htmlが、それは相同ではありません。ポートは同じではありませんので、
http://192.168.10.30:8080/index.htmlそれが相同ではない IPアドレスが同じではありませんので、。
ドメインは、私がxxxCDN CSSファイルを使用した理由と同じインターセプトではないので、一部の人々は、求めることができる、この要求はそれを傍受されませんでしたか？
ここではいくつかの、全てのクロスドメインリクエストが傍受されないに言及しなければなりません。
1.通常のブラウザは数遮らないで埋め込まれたクロスドメイン・リソース要求を。
このいわゆる埋め込みリソース、に似ている<img>ラベルSRC、<script>SRC、<link>そのような要求のhref、そのような要求が直接あなたのページにリソースを埋め込まれた要求です。だから、CDNのCSSファイルを使用してブロックされません。[クロスドメインの問題を解決するための埋め込み方法にこれで道のとても親切]
ブラウザ2は、一般的にクロスドメインのリソースを書き込むための要求の数をインターセプトしません。
これには、非XMLHttpRequestの提出の方法（一般的な形式のフォーム送信）とを形成し、ページがリダイレクト、ハイパーリンク要求いわゆる、書くためにクロスドメインのリソースを、いわゆる。
3.ブラウザは、通常、インターセプトに依頼クロスドメインのリソースを読み込みます。
XMLHttpRequestがフォームを送信するために、非同期動作で共通のXMLHttpRequest要求リソース、[]また、ことを再強調するために、同一生成元ポリシーは、セキュリティポリシーのブラウザです。あなたがリクエストを送信するためにHTTPリクエストを送信するために郵便配達員により、ブラウザソフトウェアの助けを借りずにそれらを指示することができますのであれば、それはあなたのクロスドメインリクエストによってブロックされていません。
使用可能なテストの例：
（私は時間内にWebサーバ（Tomcatのは、Apacheなど）に次のhtmlファイルを展開するときには、自分のドメインのページでは、この時間は、マシンのアドレスである必要がありlocalhost:80、この時点で私によると、上記の3つの領域は、ブラウザの傍受かどうかをテストする。結果は最後のものだけが傍受されていることである。[直接配備するページを開けないでください、それ以外の場合は普通のローカルファイルではなく、ネットワークファイルだし、ブラウズ）]これはドメインとは思いません。
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>用于测试跨域</title>
</head>
<body>
<!-- 跨域资源嵌入,允许 -->
<img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565884598468&di=bb6ccc7a3280b183e4e13c852bc8353c&imgtype=0&src=http%3A%2F%2Fs04.lmbang.com%2FM00%2FCA%2FDE%2FDpgiA1uPAOKAXmJfAADir1hWa-A750.gif" alt="">
<!-- 跨域资源写操作，允许 -->
<a href="http://www.baidu.com">百度</a>
<form action="http://www.baidu.com" method="post" >
用户名：<input type="text" name="username" value="" placeholder="">
<input type="submit" name="提交" value="提交">
</form>
<!-- 跨域资源读操作，禁止 -->
<button onclick="senddata()">XMLHttpRequest请求</button>
<script type="text/javascript">
var xmlhttp=new XMLHttpRequest();
function senddata(){
xmlhttp.open("GET","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565884598468&di=bb6ccc7a3280b183e4e13c852bc8353c&imgtype=0&src=http%3A%2F%2Fs04.lmbang.com%2FM00%2FCA%2FDE%2FDpgiA1uPAOKAXmJfAADir1hWa-A750.gif",true);
xmlhttp.send();
</script>
</body>
</html>
彼は加えました：
ブラウザは、同一生成元ポリシーを使用するのはなぜ？これは、問題を解決するために望んでいますか？
まずは、それについて話を聞かせてクッキー、クッキー、主に一部の古いWeb開発では、いくつかのデータを現在のサイトの一部を格納するために使用し、いくつかはクッキーに保存されているユーザーのログイン情報を入れます。だから、セキュリティの観点から、あなたは別のサイト（または他のクッキーのデータが他の誰かが盗むするのは非常に簡単である）を使用することはできませんあなたのサイト上でクッキーを望むならば、これはドメインによって、ドメインの概念を導入しますクロスドメイン・リソースの要求をインターセプトするために、リソースの使用を制限します。
クロスドメインを許可する方法
そこクロスドメインを解決するための多くの手段がありますが、クロスドメインコール・インタフェースのための共通の問題は、CORSです
HEARTS
- クロスドメインを許可する方法を、一つの解決策をしているソースドメインとは何ですか許可を要求する要求者に伝えるためにドメインを対象に、ブラウザは、ドメインが要求を開始Bドメインを許可するかどうかを知ることができます。
- CORS（「クロスオリジンリソースの共有」（クロスオリジンリソース共有は））決済のいずれかのような手段です。
CORSは、このような要求されたドメインにドメインを可能にするどのような目的の情報へのアクセスなどの情報提供を目的ドメインを取得する宛先ドメインへの要求OPTIONSの道を開始するために、送信先ドメインへのリクエストを開始する前にブラウザを作ります。
この目的で、通常、応答ヘッダに以下の情報を追加する必要があります。
- アクセス制御は許起源を：どのようなドメインを宣言するために使用することは、現在のドメインへの要求を開始することができます。
- アクセス制御は、-メソッド許可：現在のドメインに開始することができ、要求の種類を宣言するために使用します。
- アクセス・コントロール・マックスエイジ：これは別のOPTIONSリクエストを発行しない、その間、数秒で、有効なOPTIONS要求を指定するために使用されます。
- アクセス制御-許可-ヘッダ：あなたは追加の要求を開始するまでの任意の特別な要求を持つことができるようにします。[いくつかのプロジェクトは、トークンヘッダに前方及び後方端部を分離する、この時間は、要求が宣言するアクセス制御-許可-ヘッダを頭に必要であろう]を
[OPTIONS要求が成功した後、ブラウザは情報を記録します送信先ドメインに送信された要求をインターセプトする必要があるかどうかを決定します。OPTIONS要求が失敗した場合、それは送信されません要求によって開始されなければなりませんでした。]
しかし、時にはOPTIONS要求をトリガしません要求を送信します。要求は、以下の条件を満たしている場合は、次のようになります。
要求1の方法は、GET、POSTあるいはHEADです。
受け入れ属する2.リクエスト・ヘッド、受け入れ言語、のContent言語、コンテンツタイプ、ビューポート幅。
3. Content-Typeヘッダの要求は、application / x-www-フォーム-属する URLエンコード、マルチパート/フォームデータ、text / plainのいずれか。この要求はとも呼ばれる「単純な要求。」
単純な要求・テスト：
次の例では、シンプルかつ非単純な要求のOPTIONS要求が発行されるかどうかをテストするために使用することができます
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>用于测试简单请求</title>
</head>
<body>
<button onclick="senddata()">XMLHttpRequest请求</button>
<script type="text/javascript">
var xmlhttp=new XMLHttpRequest();
function senddata(){
xmlhttp.open("GET","https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1565884598468&di=bb6ccc7a3280b183e4e13c852bc8353c&imgtype=0&src=http%3A%2F%2Fs04.lmbang.com%2FM00%2FCA%2FDE%2FDpgiA1uPAOKAXmJfAADir1hWa-A750.gif",true);
xmlhttp.send();
//如果你有一个可以用来测试的接口，可以尝试把这一段注释了，来测试是否发送OPTIONS请求。
// xmlhttp.open("POST","http://localhost:8080/hello",true);
//下面通过加了一个请求头，使得这个请求不是一个不发OPTIONS的请求。
// xmlhttp.setRequestHeader("Content-Type", "application/json")
// xmlhttp.send();
}
</script>
</body>
</html>
バックエンド処理
どのようにバックエンド戻りCORSレスポンスヘッダを（：春のMVCでは、あなたが直接使用することができます説明するために、次のSpring MVCベースのフレームワークを@CrossOrigin返すために、単純なCORSレスポンスヘッダを）。
遠位要求テストコード：
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>用于测试OPTIONS</title>
</head>
<body>
<!-- 跨域资源读操作，禁止 -->
<button onclick="senddata()">XMLHttpRequest请求</button>
<script type="text/javascript">
var xmlhttp=new XMLHttpRequest();
function senddata(){
//如果你有一个可以用来测试的接口，可以尝试把这一段注释了，来测试是否发送OPTIONS请求。
xmlhttp.open("POST","http://localhost:8080/hello",true);
//下面通过加了一个请求头，使得这个请求不是一个不发OPTIONS的请求。
xmlhttp.setRequestHeader("Content-Type", "application/json")
xmlhttp.send();
}
</script>
</body>
</html>我々はインターフェイスを展開する必要はありません場合は、私たちは、ページがOPTIONS要求を行っていることがわかります。
また、ブラウザのコンソールには次の情報もお勧め：
我々はインターフェイスを展開するとき、我々は正式なCORSレスポンスヘッダに戻らないようにしてみてください。
ノーリターンCORSレスポンスヘッダが存在しないので、適切な情報CORSへのOPTIONS要求が存在しないので、要求がインターセプトされ、それは図の2つのパケットを警告します。
当我们在响应中添加CORS响应头后，我们可以看到我们刚刚设置的CORS响应头被OPTIONS请求成功了。
而且请求也被发出去了：
对于不同编程语言的如何使用CORS，可以自查。
补充：
- 除了正常的，例如通过js来处理跨域的。还有一些沙雕的手法，通过修改浏览器来不进行同源策略就是其中一种(治标不治本)。