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

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

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

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

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

ここに画像の説明を挿入

(2)上の図の赤丸の部分をvue scaffoldのbabel.config.jsに貼り付けます。

ここに画像の説明を挿入

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

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

ここに画像の説明を挿入

データを取得できます

ここに画像の説明を挿入

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

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

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

(2)エージェントは1つしか作成できない

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

ここに画像の説明を挿入

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

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

ここに画像の説明を挿入

要約する

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

以下もご興味があるかもしれません:
  • VUEのデータプロキシとイベントの詳細な説明
  • Vue2.xはバックエンドインターフェースプロキシを介してQQミュージックAPIからデータを取得します。
  • Vue ソースコード内のデータへのプロキシアクセスの詳細な説明

<<:  MySQLインデックスベースのストレステストの実装

>>:  CSS を使用してプログレスバーと順序プログレスバーを実装する例

推薦する

MySql 認証に基づく vsftpd 仮想ユーザー

目次1. MySQLのインストール1.2 テーブル、データベース、ユーザーを作成する1.3 リモート...

MySQL 起動時に報告される ERROR:2002 の分析と解決方法

序文この記事は主にMySQL起動エラー2002の分析と解決方法を紹介しています。参考と勉強のために共...

リソースアップロード機能を実現するための SpringBoot+nginx の詳細な例

最近、画像、ビデオ、CSS/JS などの静的リソースを配置するために nginx を使用する方法を学...

mysql5.7.19 winx64 解凍版のインストールと設定のチュートリアル

mysql 5.7.19 winx64解凍版のインストールチュートリアルを収録しました。具体的な内容...

Vue+Websocketはチャット機能を実装するだけです

この記事では、チャット機能を簡単に実装するためのVue+Websocketの具体的なコードを参考まで...

ドラッグ効果を実現するための純粋なCSSコード

目次1. ドラッグ効果の例2. CSS実装の原則3. CSS実装の詳細4. CSSレイアウト1. 固...

Firefox で Flash を再生するためのオブジェクトとパラメータの書き方

コードをコピーコードは次のとおりです。 <object classid="clsid...

MySQL マスタースレーブレプリケーションと読み取り書き込み分離の詳細な説明

目次序文1. 概要2. 読み取りと書き込みの分離3. MySQL マスタースレーブレプリケーションの...

MySQL の自動増分主キーが使い果たされた場合の対処方法

面接では、次のようなシナリオを経験する必要があります。インタビュアー: 「MySQL を使用したこと...

JavaScript でのカスタム スワイパー コンポーネントの詳細な説明

目次エフェクト表示コンポーネント設定ステップ1ステップ2ステップ3コンポーネントの使用ステップ1ステ...

テーブルを開く際のMySQLスレッドの問題の解決方法

問題の説明最近、MySQL5.6.21サーバーがありました。アプリケーションがリリースされた後、同時...

HTML にネストされた div の無効なマージンに対する解決策

div がネストされているときに margin が機能しない問題の解決策を次に示します。さて、マージ...

sqlite3 から mysql に移行するときに起こりうる問題のコレクション

簡単な説明適切な読者: モバイル開発sqlite3 データを mysql に移行する場合、多くの構文...

Docker で Springboot プロジェクトを実行する実装

導入: springboot プロジェクトを実行する Docker の構成は実は非常にシンプルで、L...

Dockerイメージの作成とプロジェクト全体のワンクリックパッケージングとデプロイ

一般的な Dockerfile 命令の紹介命令説明するから新しいイメージが構築される基となるイメージ...