フロントエンドのパッケージング後にドメインにまたがり、Nginxエージェントを使用

1713 ワード
メモ vue
一、ドメイン間とは何ですか.まず、ドメイン間ではブラウザの同源ポリシーの制限により、ブラウザ自体がドメイン間リクエストを制限します(厳密には、ドメイン間での読み取り操作を制限するだけです).ドメイン間とは何ですか?異なるプロトコル、ドメイン名、ポートで要求するのは、ドメイン間です.
二、ドメイン間の解決方法
一般的にローカルセルフテストや前後開発の導入が分離する場合1、webpackのproxyTableスキームは、一般プロジェクトにおいてwebpackに対応する開発環境のプロファイル:webpackがある.dev.jsは、プロファイルにProxyTableのプロファイルを追加します.
proxy: {
          '/api': {
          changeOrigin: true,
          target: 'http://******.*****.com',
    }
}

前後の接頭辞が一致しない場合、またはバックエンドの接頭辞が統一されていない場合は、pathRewriteプロパティを追加して統一できます.
proxy: {
            '/EntryApp': {
              changeOrigin: true,
              target: 'http://******.*******.com',
              pathRewrite: {"^/EntryApp": "/EntryApp"}
        },
    }

proxyTableはドメイン間で存在する可能性のある問題を実現する:1.クッキーが失われ、インタフェースにアクセスできません.postリクエスト403エラー
三、vueパッケージ後にNginxエージェントNginxを使用するのは無料で、オープンソースの高性能のHTTPと逆プロキシサーバーです.通常,線上前後端を別々に配置する場合はnginxを用いることが多い.nginx.confはプライマリプロファイルで、いくつかの部分からなり、各部分は{}で区別されます.主にmain:nginxのグローバル構成、グローバル有効events:nginxサーバに影響するか、ユーザーとのネットワーク接続http:複数のserverをネストでき、プロキシ、キャッシュ、ログなどのserverを構成できる:仮想ホストの関連パラメータを構成し、1つのhttpに複数のserverを持つことができる
nginxがドメイン間で解決する基本的な方法は、severでproxy_を構成することです.pass: 
//          fe.**.com
//          dev.**.com

server {
    listen: 80,
    server_name: fe.**.com,
    location / {
         proxy_pass dev.**.com
    }
}

仕事のニーズに応じて、proxy_などの他のコマンドを追加することもできます.connect_timeout:nginxリクエストの受信から上流サーバへの接続までの最長待ち時間proxy_cookie_domain:上流サーバのset_に代わるクッキーヘッダのdomainプロパティproxy_cookie_path:上流サーバのset_に代わるクッキーヘッドのpath proxy_set_ヘッダー:上流サーバヘッダに送信されたコンテンツを書き換えるか、ヘッダの値を空の文字列に設定し、ヘッダを送信しないで配布することで、以上がドメイン間のすべてのコンテンツを実現できます.
vueにおけるaxiosによる複数回の複数回のトリガによる複数回のリクエストの終了を防止するサンプルコード(ジッタ防止)
最相同子列問題(一)