nginxの前面を横切って溶液と後端分離

まず、クロスドメインとは何でしょうか？

クロスドメインのブラウザはスクリプトに他のサイトを実行できないことを意味し、それがブラウザの同一生成元ポリシーによって引き起こされる、JavaScriptを課さブラウザのセキュリティ制限されています。

第二に、同一生成元ポリシー

よると百度百科それは、ブラウザの中核であるネットスケープ、によって提案されたセキュリティポリシーは、最も基本的なセキュリティ機能で、同一生成元ポリシーが存在しない場合、ブラウザの同一生成元ポリシーの通常の機能が影響を受ける可能性があり、すべてが今、JavaScriptをサポートしていますブラウザは、この戦略を使用します。

：いわゆる相同では意味限り異なるがあるとして、プロトコル、ドメイン名、ポート番号が同じであるため、非相同的です。

元ポリシーの制限状況：

　　1、クッキー、のlocalStorageとIndexDBを読み取ることができません

　　2、DOMオブジェクトが得られる、とJSすることができません

　　図3に示すように、AJAXリクエストを送信することができません

　　注意：src属性については、IMG、IFRAME、リンク、スクリプトやその他のラベルのように特殊なケースです、彼らは非相同サイトのリソースにアクセスすることができます。

第三に、どのようにクロスドメインを解決するために

図1は、レスポンスヘッダを追加します。

2、JSONPの方法。

3、HttpClientを要求が転送されます。

4、nginxの前方

5、より多くの...

具体的な解決策は、物品の神を参照することができます。https://www.cnblogs.com/ysocean/p/9380551.html

四、nginxの間で解決します

問題の説明： Tomcatのリリースバックエンドのコンテンツを使用してnginxのフロントエンドの出版コンテンツを使用したが、問題全体に表示されます。

1、次のmyhtml中のプロジェクトのフロントエンド、nginxのは、プロジェクトをパブリッシュ使用。

{サーバ
        インクルードを聞く        8888 ; 
        サーバー名localhostと、
        LOCATION / { 
        ＃静的サーバー
            ルート    /ユーザ/デヴィッド/ MyHTML; 
            インデックスのindex.htmlのindex.htm; 
        } 
}

図2は、Tomcatを使用してバックエンドの出版プロジェクトは、Tomcatのポート番号は8080です。

@RestController
 パブリック クラスUserControllerで{ 
    @Autowired 
    UserServiceのUserServiceの。

    @RequestMapping（ "/取得" ）
     公共の一覧<ユーザー> getUserByPage（int型のpageSize、int型PAGENUM）{ 
        一覧 <ユーザー> USERLIST = userService.getAllUser（）;
        返すUSERLISTを。
    } 
}

3、フロントページshow.htmlアクセスバックエンドのAjaxコード：

$アヤックス（{ 
         URL： "にhttp：// localhost：8080 /取得" 、
         種類： "ポスト" 、
         データ型： "JSON"を、
         成功：機能（データ）{ 
         はconsole.log（データ）; 
         } 
}）;

違反ので❌データは、取得通常、この時点で送信することはできません同一生成元ポリシー。

解決策：使用nginxのプロキシTomcatコンテナ、アクセスルールを定義し、HTML TomcatはnginxのプロキシによってTomcatのHTMLコンテンツとコンテンツを実現するためのルールを転送します。クロスドメインの問題を解決するには。

1次myhtmlプロジェクトのフロントエンド、nginxのアクセスルールを定義し、プロジェクトを発行使用。

＃静的サーバ
LOCATION 。〜（HTML | JS | CSS） { 
    ルート    /ユーザ/デヴィッド/ MyHTML; 
    インデックスのindex.html index.htmを; 
}

図2は、Tomcatを使用してバックエンドの出版事業、Tomcatのポート8080は、仮想パスを追加するために、コントローラを変更します。

@RestController
 @RequestMapping（ "/春"）
 パブリック クラスUserControllerで{ 
    @Autowired 
    UserServiceのUserServiceの。

    @RequestMapping（ "/取得" ）
     公共の一覧<ユーザー> getUserByPage（int型のpageSize、int型PAGENUM）{ 
        一覧 <ユーザー> USERLIST = userService.getAllUser（）;
        返すUSERLISTを。
    } 
}

3、nginxのプロキシTomcatサービスのコードを追加し、その後、訪問ます。http：// localhost：します。http：// localhost：8080 8888に転送することができます

〜LOCATION / スプリング{ 
    ＃プロキシ逆
    proxy_passのHTTPを：// localhostを：8080; 
}

図4に示すように、コード遠位AJAXを変更します

$アヤックス（{ 
         URL： " のhttp：// localhostを：8888 /春/取得 " 、
         種類： "ポスト" 、
         データ型： "JSON"を、
         成功：機能（データ）{ 
         はconsole.log（データ）; 
         } 
}） ;

✔️あなたは、通常のデータにアクセスすることができます。

nginxのコア構成：

{サーバ
    インクルードを聞く        8888を、
    サーバー名はlocalhost; 
    ＃静的サーバ
    LOCATION〜（HTML | JS |。CSS）{ 
        ルート    / /ユーザ/デヴィッド・MyHTML; 
        インデックスのindex.htmlのindex.htm; 
    } 
    ＃リバースプロキシTomcatの
    LOCATION〜/ 春{ 
        proxy_pass HTTP：// localhostを：8080; 
    } 
}

解像度：

　　フロントページのアドレスを参照してくださいすることはあります。http：// localhost：8888 / show.html

　　show.htmlページリクエストのバックエンド・アドレスは次のとおりです。http：// localhostを：8888 /春/取得（。提出渡っ規範に違反することなく、この時間は、通常、ドメインとのリクエストを送信します）

　　します。http：// localhost：8080 /春/（通常のデータを取得するために）を取得アドレスに転送nginxのプロキシに沿って、バックエンドのアドレス転送ルール　　　

参考大神文章：

https://www.cnblogs.com/ysocean/p/9380551.html