Vueデータプロキシの詳細な説明

jsonp や cors など、クロスドメインの問題を解決する方法は多数ありますが、どちらもバックエンド担当者の支援が必要です。

1. これからお話しするのは、フロントエンド担当者がvue-cliで完了できるソリューション、データプロキシです。

(1) まず、vue-cli公式ドキュメントの設定項目からプラグインをダウンロードする必要があります

（２）上の図の赤丸の部分をvue scaffoldのbabel.config.jsに貼り付けます。

（３）上図の赤丸部分http://localhost:5000はローカルサーバのアドレスですが、私のプロジェクトで開始したサービスはhttp://localhost:8082/です。

この時点で、プロジェクトのバックエンドにリクエストを送信します

データを取得できます

プロジェクトの public フォルダーにローカル サーバーと同じ名前のファイルがある場合は、プロジェクトの public フォルダーで最初に読み取られることに注意してください。

2. 上記のデータエージェントには、以下の欠陥がまだ残っています。

（１）サーバーファイルと同じファイル名のローカル公開ファイルが存在する場合、ローカルファイルが先に返されます。

（２）エージェントは１つしか作成できない

1. 上記の問題を解決するために、プロキシを作成する別の方法を使用できます。

上の図では、/api と /apii は 2 つの異なるデータ エージェントです。

2. 同時に、フロントエンドがリクエストを送信するためのインターフェース パスも http://localhost:8082/students から次のように変更し、ローカル パブリック フォルダー内のファイルがリクエストされないようにする必要があります。

要約する

この記事はこれで終わりです。皆さんのお役に立てれば幸いです。また、123WORDPRESS.COM のその他のコンテンツにも注目していただければ幸いです。