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 を使用してプログレスバーと順序プログレスバーを実装する例

推薦する

Web ページ制作におけるテーブル属性 CellPad、CellSpace、Border の説明と使用

cellspacing は表内のセル間の距離です。セルパディングは、表のセル内の空白スペースです。一...

Nginxの書き換えモジュールの詳細な説明

書き換えモジュールは ngx_http_rewrite_module モジュールです。その主な機能は...

ミニプログラムカスタムタブバーコンポーネントのカプセル化

この記事の例では、ミニプログラムのカスタムタブバーコンポーネントをカプセル化するための具体的なコード...

...

ページ下部のフッターを修正する方法(複数の方法)

フロントエンド Web エンジニアとして、ページ効果を作成するときに次の現象に遭遇したことがあるはず...

MySQL テーブルと列のコメントの概要

コードと同様に、テーブルや列にコメントを追加して、他のユーザーがその機能を理解できるようにすることが...

HTML テーブルタグチュートリアル (8): 背景画像属性 BACKGROUND

テーブルの背景画像を設定します。任意の GIF または JPEG 画像ファイルを使用できます。基本的...

CSS3 で King of Glory マッチング人員読み込みページを実装する方法

King of Glory をプレイしたことがある人なら、このページの効果をよくご存知でしょう。なぜ...

CSS が初期読み込み時の白い画面の時間に与える影響

外部 CSS ファイルを使用したレンダリング パイプライン上図では、HTML データの要求から DO...

Docker データ ストレージ ボリュームの詳細な説明

デフォルトでは、コンテナ データの読み取りと書き込みはコンテナのストレージ レイヤーで行われます。コ...

ウェブページで Enter キーを押すと自動的にフォームを送信し、他のページにジャンプするソリューション

ウェブページでEnterキーを押すと、フォームは自動的に送信され、他のページに移動します。クエリフォ...

MySQL Innodb インデックス メカニズムの詳細な紹介

1. インデックスとは何ですか?インデックスは、ストレージ エンジンがレコードをすばやく検索するため...

MySQL 面接でよく聞かれる質問への回答

序文:さまざまな技術職の面接では、MySQL 関連の質問がよくされるようです。開発職の面接でも運用職...

Tudou.com フロントエンドの概要

1. 分業とプロセス<br />Tudou.comでは、プロジェクト開発が中核であり、誰...

Linux ncコマンドの概要

NC のフルネームは Netcat (Network Knife) で、作成者は Hobbit &a...