Vue プロジェクトでクロスドメイン リクエストに JSONP を使用する方法
はじめに:
Vue プロジェクトでは、データを取得する必要がある場合があります。たとえば、サードパーティ API を呼び出してデータを取得する場合、通常の状況では、ブラウザの同一オリジン ポリシーにより、直接のクロスドメイン リクエストは禁止されています。ただし、場合によっては、JSONP テクノロジーを使用してクロスドメイン リクエストを実装できます。この記事では、JSONP を使用して Vue プロジェクトでクロスドメイン リクエストを行う方法を紹介し、具体的なコード例を示します。
1. JSONP の動作原理:
JSONP (JSON with Padding) は、<script></script>
タグを動的に作成することでクロスドメイン リクエストを実装するテクノロジーです。これは、<script></script>
タグがドメインを越えてアクセスできるという事実を利用します。具体的な実装手順は次のとおりです。
<script>## の </script>
src に割り当てます。 # タグの属性。
以下では、JSONP を使用して Vue プロジェクトでクロスドメイン リクエストを行う方法の具体的な手順を説明します。
Vue プロジェクトで JSONP を使用するには、npm を使用してインストールできる jsonp ライブラリをインストールする必要があります。ターミナルで次のコマンドを実行してインストールします。
1 |
|
Vue プロジェクトでは、通常、コンポーネントのメソッドで JSONP リクエストを作成します。気象データを取得する例です。具体的なコードは次のとおりです:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
|
weatherCallback を値とするコールバック パラメーターが含まれています。 JSONP ライブラリはサーバーから返されたデータをコールバック関数に渡し、返されたデータをコールバック関数で処理できます。
Vue プロジェクトでは、getWeather メソッドをボタンのクリック イベントにバインドできます。具体的なコードは次のとおりです:
1 2 3 4 5 |
|
getWeather メソッドでは、サーバーから JSONP 経由で返されたデータを取得した後、ページ上にデータを表示するなど、データを処理できます。具体的なコードは次のとおりです:
1 2 3 4 5 6 7 8 9 |
|
この記事では、JSONP を使用して Vue プロジェクトでクロスドメイン リクエストを行う方法の手順を紹介します。まず、jsonp ライブラリをインストールし、次に特定のメソッドで JSONP リクエストを作成し、返されたコールバック関数でデータを処理する必要があります。最後に、テンプレート内でこのメソッドを呼び出して、返されたデータをページに表示します。 JSONP を使用すると、クロスドメイン要求の問題の一部を解決できますが、セキュリティや互換性などの問題に注意を払い、特定のニーズに基づいて適切な選択を行う必要があります。
以上がVue プロジェクトでクロスドメインリクエストに JSONP を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。