Vue プロジェクトでクロスドメインリクエストに JSONP を使用する方法

Vue プロジェクトでクロスドメイン リクエストに JSONP を使用する方法

はじめに:
Vue プロジェクトでは、データを取得する必要がある場合があります。たとえば、サードパーティ API を呼び出してデータを取得する場合、通常の状況では、ブラウザの同一オリジン ポリシーにより、直接のクロスドメイン リクエストは禁止されています。ただし、場合によっては、JSONP テクノロジーを使用してクロスドメイン リクエストを実装できます。この記事では、JSONP を使用して Vue プロジェクトでクロスドメイン リクエストを行う方法を紹介し、具体的なコード例を示します。

1. JSONP の動作原理:
JSONP (JSON with Padding) は、<script></script> タグを動的に作成することでクロスドメイン リクエストを実装するテクノロジーです。これは、<script></script> タグがドメインを越えてアクセスできるという事実を利用します。具体的な実装手順は次のとおりです。

1. クライアントはコールバック関数を使用して URL を作成し、その URL を <script>## の </script>src に割り当てます。 # タグの属性。
サーバーはこのリクエストを受信すると、URL 内のコールバック関数名を解析し、データをコールバック関数にラップして、それを返します。
2. クライアントは、サーバーから返されたスクリプトを受信すると、すぐにスクリプトを実行し、それによってコールバック関数をトリガーし、返されたデータを処理します。

2. JSONP を使用して Vue プロジェクトでクロスドメイン リクエストを行う:

以下では、JSONP を使用して Vue プロジェクトでクロスドメイン リクエストを行う方法の具体的な手順を説明します。

1. jsonp ライブラリのインストール:

   Vue プロジェクトで JSONP を使用するには、npm を使用してインストールできる jsonp ライブラリをインストールする必要があります。ターミナルで次のコマンドを実行してインストールします。
   

   npm install jsonp

   インストールが完了したら、jsonp ライブラリを Vue プロジェクトに導入できます。

2. JSONP リクエストの作成:

   Vue プロジェクトでは、通常、コンポーネントのメソッドで JSONP リクエストを作成します。気象データを取得する例です。具体的なコードは次のとおりです:
   

   import jsonp from 'jsonp';
   
   export default {
     methods: {
    getWeather() {
      const url = 'http://api.weather.com/weatherData?callback=weatherCallback';
      jsonp(url, (err, data) => {
        if (err) {
          console.log(err);
        } else {
          this.weatherData = data; // 处理返回的数据
        }
      });
    }
     }
   }

   上記のコードでは、まず jsonp ライブラリを導入し、getWeather メソッドで JSONP リクエストを作成します。リクエスト URL には、定義されたコールバック関数名

   weatherCallback を値とするコールバック パラメーターが含まれています。 JSONP ライブラリはサーバーから返されたデータをコールバック関数に渡し、返されたデータをコールバック関数で処理できます。

3. テンプレート内のメソッドを呼び出します:

   Vue プロジェクトでは、getWeather メソッドをボタンのクリック イベントにバインドできます。具体的なコードは次のとおりです:
   

   <template>
     <div>
    <button @click="getWeather">获取天气</button>
     </div>
   </template>

4. 返されたデータの処理:

   getWeather メソッドでは、サーバーから JSONP 経由で返されたデータを取得した後、ページ上にデータを表示するなど、データを処理できます。具体的なコードは次のとおりです:
   

   <template>
     <div>
    <button @click="getWeather">获取天气</button>
    <div v-if="weatherData">
      <p>城市：{{ weatherData.city }}</p>
      <p>温度：{{ weatherData.temperature }}</p>
    </div>
     </div>
   </template>

概要:

この記事では、JSONP を使用して Vue プロジェクトでクロスドメイン リクエストを行う方法の手順を紹介します。まず、jsonp ライブラリをインストールし、次に特定のメソッドで JSONP リクエストを作成し、返されたコールバック関数でデータを処理する必要があります。最後に、テンプレート内でこのメソッドを呼び出して、返されたデータをページに表示します。 JSONP を使用すると、クロスドメイン要求の問題の一部を解決できますが、セキュリティや互換性などの問題に注意を払い、特定のニーズに基づいて適切な選択を行う必要があります。

以上がVue プロジェクトでクロスドメインリクエストに JSONP を使用する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。