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
      }
    }
  }
}

上記のプロキシ構成では、/api パスにあるすべてのリクエストをローカルの http://localhost:8080# # ＃ 住所。

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

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

ここでの /api1 と

/api2

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

target

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

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

ローカル サーバーでは、## などのプロキシ ミドルウェアをセットアップする必要があることに注意してください。 #http-プロキシ-ミドルウェア

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

概要

上記の紹介を通じて、vue-cli でのプロキシ リクエストの原理を理解しました。プロキシ リクエストは、フロント エンドでクロスドメインの問題を解決する方法であり、リクエストをローカル サーバーに転送し、ローカル サーバーがバックエンド サーバーにリクエストを転送することで、クロスドメイン リクエストの効果が得られます。 vue-cli では、vue.config.js ファイルを構成してプロキシ リクエストを設定し、フロントエンドでクロスドメイン リクエストを実現できます。

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