Vue-cli proxyTable が開発環境におけるクロスドメインの問題を解決する方法

この記事では、開発環境におけるクロスドメインの問題を解決するための Vue-cli proxyTable の詳細な説明を主に紹介します。必要な場合は、必ず参考にしてください。バックエンドと共同でデバッグするときの問題。私も最近、Vue に基づいてプロジェクトを開発しているときに、両方で多くの方法を考え、多くの情報を確認し、最終的には多くのパラメーターを追加しました。オンラインになるときに使用するドメイン名にローカルホストをマップします。

今日コードを眺めていたら、vue-cliの設定ファイルにproxyTableというパラメータがあることに気づき、この名前を見ると解決できそうな気がしたので探してみました。 、そして確かに。 vue-cli で使用するテンプレートプラグインである vuejs-templates には API プロキシに関する記述があり、このパラメータを使用します。

https://vuejs-templates.github.io/webpack/proxy.html

このパラメータは主に、リクエストしたいアドレスを設定することで、複雑な URL を簡素化できます。 is api .xxxxxxxx.com/list/1 は次のように設定できます:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

このように、URL を記述するときは、api.xxxxxxxx.com/ を表すために /list/1 を記述するだけで済みます。 list/1.

それでは、クロスドメインの問題を解決するにはどうすればよいでしょうか?実際、上記の「list」パラメータには、ブール値を受け取るchangeOriginパラメータがあり、これがtrueに設定されている場合、ローカル仮想サーバーがリクエストを受信し、ユーザーに代わってリクエストを送信します。クロスドメインの問題はありません。もちろん、これは開発環境にのみ当てはまります。追加されたコードは次のとおりです:

proxyTable: {
 '/list': {
  target: 'http://api.xxxxxxxx.com',
  changeOrigin: true,
  pathRewrite: {
   '^/list': '/list'
  }
 }
}

vue-cli この設定は、使用するプラグイン http-proxy-middleware から取得されます

github: https://github.com/chimurai/http-proxy - ミドルウェア

さらに詳しく知りたい場合は、プラグインの設定手順を参照してください。非常に強力なプラグインである websocket もサポートしているようです。

以上がこの記事の全内容です。その他の関連コンテンツについては、PHP 中国語 Web サイトをご覧ください。

関連する推奨事項:

vue.jsのフロントエンドとバックエンドのデータ相互作用のためのデータ送信の操作について

vue-cliでスタイラスが使用できない問題を解決する方法

以上がVue-cli proxyTable が開発環境におけるクロスドメインの問題を解決する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。