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

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

WBOY

リリース： 2022-04-28 10:26:03

オリジナル

3584 人が閲覧しました

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

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

この記事の動作環境: 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: { 
      &#39;/api&#39;: { 
             target: &#39;http://localhost:80&#39;,
             changeOrigin: true, 
             pathRewrite: {undefined
                &#39;^/api&#39;: ""   
              }，
        &#39;/apidouban&#39;: {undefined
             target: &#39;http://localhost:3001&#39;,
             changeOrigin: true, 
             pathRewrite: {undefined
                &#39;^/apidouban&#39;: ""
              }
          }
      }
   }
}

ログイン後にコピー

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

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

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

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

# /api:

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

[関連する推奨事項:

vue.js チュートリアル

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