Vue のリバース プロキシを使用する理由は何ですか?

vue では、リバース プロキシによって実サーバーが隠蔽され、実際の URL を直接リクエストすることで発生するクロスドメインの問題を回避できるため、クロスドメインの問題を回避するにはリバース プロキシを使用する必要があります。フロントエンドとバックエンドが別々に開発されているシナリオでよく使用され、フロントエンドはバックエンド インターフェイスに接続し、同じソースからのリクエストをリバース プロキシ サーバーに送信する必要があります。

この記事の動作環境: Windows 10 システム、Vue バージョン 2.9.6、DELL G3 コンピューター。

vue のリバース プロキシを使用する理由

リバース プロキシの使用シナリオ

フロントエンドとバックエンドを個別に開発するシナリオでは、次のようになります。フロントエンドにサーバー (静的ページを提供)、バックエンドにサーバー (インターフェイスを提供)

#現時点では、フロントエンドはバックエンド インターフェイスに接続する必要があり、クロスドメインの問題が発生します。

パブリッシング環境でクロスドメインの問題がある場合は、nginx を使用してください。

フロントエンド コードとバックエンド コードが同じサーバー上にある場合、クロスドメインは発生しません。問題

クロスドメイン ソリューション

jsonp (フロントエンド ソリューション ソリューション)

CORS (バックエンド ソリューション): クロスオリジン リソース共有

リバース プロキシ (フロントエンド ソリューション)

リバース プロキシとは

リバース プロキシは実サーバーを非表示にするため、ブラウザーは引き続きアクセスできます。同じオリジン

リバース プロキシの原理

http を作成するリクエストを偽造することにより、リクエストは同じソースからのものであり、同じソースからのリクエストはリバース プロキシ サーバーとリバース プロキシ サーバーが実際の URL を要求するため、実際の URL を直接要求することによって発生するクロスドメインの問題が回避されます

リバース プロキシの構成

# vue-cli3 のリバースプロキシ

プロジェクトのルートディレクトリに新しい vue.config.js ファイルを作成します

設定コード:

module.exports = {undefined
  lintOnSave:false,
  devServer:{undefined
    proxy: { 
      '/api': { 
             target: 'http://localhost:80',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/api': ""   
              }，
        '/apidouban': {undefined
             target: 'http://localhost:3001',
             changeOrigin: true, 
             pathRewrite: {undefined
                '^/apidouban': ""
              }
          }
      }
   }
}

リバースプロキシ実行プロセス:

axios アクセス アドレスの /api をターゲットの /api に変換します:

(例: http:localhost:9000/api /goods は http://localhost:80/api/goods に変換されます)

仮想サーバーを作成します

# /api:

を削除します (例: http://localhost: 80/goods)

[関連する推奨事項:

vue.js チュートリアル

"]

以上がVue のリバース プロキシを使用する理由は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。