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

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

王林

リリース： 2023-10-15 10:07:45

オリジナル

1674 人が閲覧しました

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

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

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

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

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

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

jsonp ライブラリのインストール:
Vue プロジェクトで JSONP を使用するには、npm を使用してインストールできる jsonp ライブラリをインストールする必要があります。ターミナルで次のコマンドを実行してインストールします。
```
npm install jsonp
```
ログイン後にコピー
インストールが完了したら、jsonp ライブラリを Vue プロジェクトに導入できます。
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 ライブラリはサーバーから返されたデータをコールバック関数に渡し、返されたデータをコールバック関数で処理できます。
テンプレート内のメソッドを呼び出します:
Vue プロジェクトでは、getWeather メソッドをボタンのクリックイベントにバインドできます。具体的なコードは次のとおりです:
```
<template>
  <div>
 <button @click="getWeather">获取天气</button>
  </div>
</template>
```
ログイン後にコピー
返されたデータの処理:
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 サイトの他の関連記事を参照してください。