No'Access-Control-Allow-Origin'header is present on the requested resource'ドメイン間アクセスの解決方法


1.同じドメイン名でないリソースファイル(ipアドレス+ポート番号)を要求すると、次のエラーが発生します.「No'Access-Control-Allow-Origin'header is present on the requested resource.Origin」http://localhost:8080’ is therefore not allowed access.”,翻訳すると、要求されたリソースに「Access-Control-Allow-Origin」が設定されていないため、http://localhost:8080'開始されたリクエストは許可されません.
2.理由:ブラウザのソースポリシーによって、このようなリクエストが制限されています.同源戦略とは?Same origin policy(Same origin policy)は、Netscape社が1995年にブラウザに導入したもので、ブラウザの最も核心的で最も基本的なセキュリティ機能であり、同源ポリシーが欠けていると、ブラウザはXSS、CSFRなどの攻撃を受けやすい.同源とは「協議+ドメイン名+ポート」を指す3つは同じで、2つの異なるドメイン名が同じipアドレスを指していても、同じソースではありません.同源ポリシーは、次の動作を制限します:1.)Cookie、LocalStorage、IndexDBは読み込めません2.)DOMとJsオブジェクトは3を取得できません.)AJAXリクエストでは一般的なドメイン間シーンを送信できません1.)同じドメイン名の下にある異なるファイルまたはパスにアクセスできます.http://www.domain.com/a.js http://www.domain.com/b.js http://www.domain.com/lab/c.js2)同じドメイン名の異なるポートにアクセスできません.http://www.domain.com:8000/a.js http://www.domain.com/b.js3)同じドメイン名で異なるプロトコルにアクセスできません.http://www.domain.com/a.js https://www.domain.com/b.js4.)同じipアドレスの下の異なるドメイン名間では、アクセスは許可されません.http://www.domain.com/a.js http://192.168.4.12/b.js5)異なるドメイン名間ではアクセスが許可されていません.http://www.domain1.com/a.js http://www.domain2.com/b.js
3.解決策.1.)上記のエラー・プロンプトに対して、要求されたリソース・ファイルに「Access-Control-Allow-Origin」を追加することで、ドメイン間の問題を解決できることは間違いありません.(1)静的HTMLファイルが要求された場合は,要求されたHTMLファイルにラベルを付けるだけでよい.


(2)javaインタフェースが要求された場合、応答ヘッダに次のように加算することができる.
response.setHeader("Access-Control-Allow-Origin", "http://www.domain1.com"); 

(3)要求された場合.Netインタフェースは、応答ヘッダに次のように追加できます.
Response.AddHeader("Access-Control-Allow-Origin", "*");

2)もう一つの方法は先端から解決することである.フロントエンドはjsonpリクエスト方式またはエージェント設定方式で解決できます.(1)jsonpによる方式.ドメイン間原理:通常、webサーバの負荷を軽減するために、js、css、imgなどの静的リソースを別の独立したドメイン名のサーバに分離し、htmlページで対応するラベルを介してドメイン名から静的リソースをロードすることをブラウザに許可され、この原理に基づいてscriptを動的に作成することができます.ドメイン間通信を実現するために、もう1つの参照付きウェブサイトを要求します.

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

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

    //       
    function onBack(res) {
        alert(JSON.stringify(res));
    }
 
jquery  :
$.ajax({
    url: 'http://www.domain2.com:8080/login',
    type: 'get',
    dataType: 'jsonp',  //      jsonp
     crossDomain: true,
	 success: function(data) {},
    data: {}
});

(2)エージェントを要求する方式.ドメイン間原理:同源ポリシーはブラウザのセキュリティポリシーであり、HTTPプロトコルの一部ではない.サーバ側がHTTPインタフェースを呼び出すのは、HTTPプロトコルを使用するだけで、JSスクリプトは実行されず、同源ポリシーは必要なく、問題もありません.以下にjava/.Netドメイン間ファイルのソースコードは、自分で公開して使用してください.要求エージェントファイルのソースアドレス:https://github.com/muziye2013/CrossDomainAccessProxy
a.もしそうなら.NET開発環境では、ダウンロードした「DotNet」のソースコードをサイトNo 'Access-Control-Allow-Origin' header is present on the requested resource', 跨域访问的解决方法_第1张图片として公開し、ソースコードDotNetアドレス:No 'Access-Control-Allow-Origin' header is present on the requested resource', 跨域访问的解决方法_第2张图片にindexを変更してください.htmlページで要求するリソースは、ブラウザでindexにアクセスする.htmlページでテストを行います.
 var testUrl="http://172.17.0.130/***/query";//        

b.Java開発環境の場合、ダウンロードした「Java」のソースコードをtomcatサイトの下のwebappsディレクトリの下に置き、No 'Access-Control-Allow-Origin' header is present on the requested resource', 跨域访问的解决方法_第3张图片でindexを修正してください.htmlページで要求されたリソースはtomcatを起動し、ブラウザでindexにアクセスする.htmlページでテストを行います.
以上,第3の方式を用いて構成することを推奨し,特に前後端分離開発においては,一労永逸にドメイン間問題を解決する.
記事の参考:https://segmentfault.com/a/1190000011145364