フロントエンドとバックエンドの分離-クロスドメイン

1.クロスドメインの問題が発生する理由
 
     クロスドメインの問題は、JavaScriptの同じ起源の戦略から生じます
 
    つまり、プロトコル+ホスト名+ポート番号(存在する場合)が同じ場合のみ、相互アクセスが許可されます。
 
    つまり、JavaScriptは自身のドメイン内のリソースにしかアクセスおよび操作できず、他のドメイン内のリソースにはアクセスおよび操作できません。
 
    クロスドメインの問題は、JSとajaxに関するものです。HTML自体には、タグ、スクリプトタグ、フォームタグなどのクロスドメインの問題はありません
 
2.クロスドメインとは
       
1つのURLを介して別のURLにアクセスするプロセスで、 プロトコル、ドメイン名、およびポートの いずれかが異なる場合、それはクロスドメインです
 
3.クロスドメインを解決する方法
 
    1 変更ブラウザの設定
 
--disable-web-security--user-data-dir#パスでChrome.exeを見つけ、前のコマンドを使用してブラウザーの設定を変更します
 
    2.変更リクエスト方法: J sonp
 
$( "#Test")。click(function(){
    $ .ajax({
        url: 'http://www.xiaozhao.top/Index/Test/crossDomain'、
        データ:{}、
        タイプ: 'get'、
        dataType: 'jsonp'、
        成功:関数(結果){
            アラート(結果);
        }
    });
});
    
短所:J sonp はGETリクエストのみをサポートします
           クロスドメインHTTPリクエストのみをサポート
           他にも多くの制限があるかもしれません...
 
 
    3.CORS
        1. CORSとは
 
          CORSはW3C標準であり、完全な名前は「クロスオリジンリソースシェアリング」(クロスオリジンリソースシェアリング)です。
プロトコル:
  1. 従来のAjaxリクエストは同じドメイン名でのみリソースを取得できますが、HTML5はこの制限を破り、Ajaxがクロスドメインリクエストを開始できるようにします。            
  2. ブラウザはクロスドメインリクエストを開始できます。たとえば、外部ドメインの画像やスクリプトをリンクできます。ただし、JavaScriptスクリプトはこれらのリソースのコンテンツを取得できません。ブラウザで実行またはレンダリングすることしかできません。
  3. FlashおよびSilverlightでは、サーバーはクロスドメインリクエストを許可するためにcrossdomain.xmlファイルを作成する必要があります。このファイルで「http://your.site」が「http://my.siteリクエストから許可」を宣言している場合、「http://my.siteリクエスト」からすべての「HTTP:// your。サイト」。これはサイトレベル全体の制御モードであり、外部ドメインからのサイトへのアクセスを許可するか、拒否します。
  4. CORは異なり、ページレベルの制御モードです。各ページは、外部ドメインからのサイトへのアクセスを許可するために、「Access-Control-Allow-Origin」という名前のHTTPヘッダーを返す必要があります。限られたリソースと限られた外部ドメインサイトアクセスのみを公開できます。CORモデルでは、アクセス制御の責任は、サーバー管理者ではなく、ページ開発者の手に委ねることができます。もちろん、ページ開発者は外部ドメインによるアクセスを許可するために特別な処理コードを書く必要があります。
 
もう1つの大きな違いは、特定のサイトのcrossdomain.xmlファイルが最初に取得され、ブラウザーによって分析されることです。外部ドメインのサイトへのアクセスが許可されていない場合、ブラウザーはクロスドメイン要求をまったく発行しません。
CORはその逆です。Javascriptは最初にクロスドメインリクエストを作成し、次にレスポンスの「Access-Control-Allow-Origin」ヘッダーを確認します。このヘッダーが外部ドメインへのアクセスを許可する場合、JavaScriptは応答を読み取ることができます。それ以外の場合、アクセスは禁止されます。リクエストが単純なCORでない場合は、事前チェックリクエストを外部ドメインサーバーに送信します。レスポンスヘッダーがアクセスを許可する場合は、クロスドメインリクエストを送信します。それ以外の場合は禁止されます。
CORの実装標準はCORSプロトコルです。
 
        2.要件
 
            CORSには、ブラウザーとサーバーの両方のサポートが必要です。現在、すべてのブラウザーがこの機能をサポートしており、IEブラウザーをIE10より低くすることはできません
 
        3.リクエストの分類
 
             単純な要求(単純な要求)と非単純な要求(それほど単純ではない要求)
 
        4.解決する
              1.サーバーのコード設定ヘッダー情報を変更する
                  res.setHeader( 'Access-Control-Allow-Origin'、 "*"); //ドメイン名にアクセスできる場合、*はすべてを意味します
                  res.setHeader( 'Access-Control-Allow-Credentials'、true); //クッキーを運ぶことは可能ですか
                  res.setHeader( 'Access-Control-Allow-Methods'、 'POST、GET、PUT、DELETE、OPTIONS');

              2. @CrossOrigin経由

 

             3.ゲートウェイ経由で構成する

 
 
        
 

おすすめ

転載: blog.csdn.net/weixin_43562937/article/details/106533784