vue-cli プロキシリクエストの原則

Vue は、インタラクティブな Web アプリケーションの作成に使用できる人気のある JavaScript フレームワークです。開発プロセスでは、通常、vue-cli を使用して基本的な Vue プロジェクトを初期化します。 vue-cli は Vue が公式に提供しているスキャフォールディング ツールで、プロジェクトの初期化、パッケージ化、パブリッシュなど便利な機能が多数提供されています。

ただし、開発プロセス中にクロスドメインリクエストという問題が発生する可能性があります。ブラウザーの同一オリジン ポリシーにより、フロントエンド Ajax でリクエストを送信する場合、同じドメイン名のサーバー リソースのみをリクエストできますが、他のドメイン名のサーバー リソースはリクエストできません。現時点では、vue-cli のプロキシ リクエストを通じてこの問題を解決できます。

それでは、vue-cli のプロキシ リクエストはどのように実装されるのでしょうか?

直接リクエストとプロキシ リクエストの違い

プロキシ リクエストの原理を理解する前に、直接リクエストとプロキシ リクエストの違いを理解する必要があります。開発プロセス中に Ajax リクエストを通じてバックグラウンド サービスに直接アクセスすると、次の図に示すように、リクエストはフロントエンドからバックエンドに直接送信されます。 ##この方法には、クロスドメインの問題が含まれます。バックエンド インターフェイスがクロスドメイン応答ヘッダーを設定しない場合、ブラウザーはフロントエンドによる AJAX リクエストの開始を禁止し、リクエストが失敗します。

vue-cli では、プロキシ リクエストを通じてこの問題を解決します。リクエストをプロキシする基本的な考え方は、リクエストをローカル サーバーに送信し、ローカル サーバーがそのリクエストをバックエンド サーバーに転送することです。

vue.config.js でのプロキシ構成

vue-cli プロジェクトでは、vue.config.js ファイルを構成することでプロキシを設定できます。聞く。このファイルでは、devServer

proxy

module.exports = {
  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:8080',
        changeOrigin: true
      }
    }
  }
}

このうち、changeOrigin オプションは、リクエスト ヘッダー内の元のホスト名を変更する必要があるかどうかを制御するために使用されます。 プロキシ オブジェクトでは、複数のプロキシ アドレスを設定できます。例:

module.exports = {
  devServer: {
    proxy: {
      '/api1': {
        target: 'http://localhost:8081',
        changeOrigin: true
      },
      '/api2': {
        target: 'http://localhost:8082',
        changeOrigin: true
      }
    }
  }
}

ここでの /api1 と

はそれぞれ転送を表します。リクエスト パスの

属性は、転送先のサーバー アドレスを指定します。 実装原理プロキシ リクエストの構成を理解した後、プロキシ リクエストの実装原理を見てみましょう。 まず、フロントエンドでリクエストを開始すると、リクエストはまずローカル サーバーに送信されます。ローカルサーバーはリクエストを受信すると、リクエストヘッダーの変更、リクエストパスの変更など、リクエストに対する一連の処理を実行します。処理されたリクエストはバックエンド サーバーに転送されます。

フローチャートは次のとおりです。

。プロキシ ミドルウェアは、応答リクエストに似たインターセプターであり、リクエスト プロセスを制御し、リクエストの内容を変更するために使用されます。プロキシ ミドルウェアを構成することで、リクエストのプロキシ転送を実装できます。

概要

以上がvue-cli プロキシリクエストの原則の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。