ホームページ >ウェブフロントエンド >フロントエンドQ&A >vue リバース プロキシ IP はポートに接続できますか?

vue リバース プロキシ IP はポートに接続できますか?

PHPz
PHPzオリジナル
2023-04-26 14:18:53548ブラウズ

Vue リバース プロキシ IP はポートに接続できますか?

Vue.js は、リバース プロキシ (リバース プロキシ) を使用してリクエストをリモート サーバーに転送し、クロスドメインの問題を解決する人気の JavaScript フレームワークです。リバース プロキシは、クライアントとバックエンド サーバー間のミドルウェアであり、クライアントから送信されたリクエストの真の送信元アドレスを隠す機能があります。 Vue.js では、リバース プロキシは次の機能を実行できます。クライアント リクエストの受信、リモート サーバーへのリクエストの転送、サーバーの応答の返し、クライアントへの応答の受け渡しです。

リバース プロキシでは通常、プロキシ サーバー アドレスの構成が必要です。このアドレスは通常、IP アドレスまたはドメイン名です。 Vue.js でリバース プロキシ サーバーを使用する場合、そのサーバーが特定のポートで実行されている場合は、プロキシ サーバー アドレスの後に port パラメーターを追加する必要があります。

まず、Vue.js プロジェクトのルート ディレクトリで vue.config.js ファイルを開き、次の構成を追加します:

module.exports = {
devServer: {

proxy: {
  '/api': {
    target: 'http://127.0.0.1:3000',
    changeOrigin: true, // needed for virtual hosted sites
    pathRewrite: {
      '^/api': ''
    }
  }
}

}
}

上記のコードに示すように、プロキシ アドレスが「http://127.0.0.1:3000/api」であるリバース プロキシ サーバーを構成しました。このうち、「/api」は転送する必要があるクライアント要求を表し、「http://127.0.0.1:3000」は転送する必要があるリモートサーバーのアドレスを表します。プロキシ サーバーが特定のポートに対するリクエストを受け入れるようにする場合は、宛先アドレスにポート番号を追加できます。

たとえば、リモート サーバーがポート 8000 で実行されている場合、ターゲット アドレスを「http://127.0.0.1:8000」に変更できます。このようにして、Vue.js はクライアント要求を指定されたリモート サーバーに正常に転送できます。

一般に、Vue.js のリバース プロキシ機能は非常に強力で、クロスドメイン リクエストの問題の解決に役立ち、それによってフロントエンドの開発作業が簡素化されます。 Vue.js でリバース プロキシ サーバーを使用し、特定のポート番号を指定する必要がある場合は、対応するパラメーターを構成ファイルに追加するだけです。

以上がvue リバース プロキシ IP はポートに接続できますか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。