Comment utiliser JSONP pour les requêtes inter-domaines dans les projets Vue

Comment utiliser JSONP pour les requêtes inter-domaines dans le projet Vue

Introduction :
Dans le projet Vue, vous rencontrerez parfois des situations où vous devrez obtenir des données de différents noms de domaine, comme l'obtention de données en appelant un API tierce. En général, selon la politique de même origine du navigateur, les requêtes directes entre domaines sont interdites. Mais dans certains cas, nous pouvons utiliser la technologie JSONP pour implémenter des requêtes inter-domaines. Cet article expliquera comment utiliser JSONP pour effectuer des requêtes inter-domaines dans le projet Vue et donnera des exemples de code spécifiques.

1. Comment fonctionne JSONP :
JSONP (JSON with Padding) est une technologie qui implémente des requêtes inter-domaines en créant dynamiquement des balises <script></script>. Il tire parti de la fonctionnalité d'accessibilité inter-domaines de la balise <script></script>. Les étapes spécifiques de mise en œuvre sont les suivantes : <script></script>标签来实现跨域请求的技术。它利用了<script></script>标签可以跨域访问的特性。具体实现步骤如下：

1. 客户端创建一个带有回调函数的URL，并将该URL赋值给<script></script>标签的src属性。
2. 服务器端接收到这个请求后，解析URL中的回调函数名称，并将数据包裹在该回调函数中返回。
3. 客户端接收到服务器返回的脚本后，会立即执行该脚本，从而触发回调函数并处理返回的数据。

二、在Vue项目中使用JSONP进行跨域请求：
下面我们将讲解如何在Vue项目中使用JSONP进行跨域请求的具体步骤。

1. 安装jsonp库：
   在Vue项目中使用JSONP需要安装jsonp库，可以使用npm进行安装。在终端中执行以下命令进行安装：

   npm install jsonp

   安装完成后，我们可以在Vue项目中引入jsonp库。

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中包含一个callback参数，值为定义的回调函数名称weatherCallback

   Le client crée une URL avec une fonction de rappel et attribue l'URL à l'attribut src du <script> étiqueter.
   1. Après avoir reçu cette demande, le serveur analyse le nom de la fonction de rappel dans l'URL, encapsule les données dans la fonction de rappel et les renvoie.

      
      Après avoir reçu le script renvoyé par le serveur, le client exécutera immédiatement le script, déclenchant ainsi la fonction de rappel et traitant les données renvoyées.

   2. 2. Utilisez JSONP pour les requêtes inter-domaines dans le projet Vue :

      Ci-dessous, nous expliquerons les étapes spécifiques pour utiliser JSONP pour les requêtes inter-domaines dans le projet Vue.
      

      Installer la bibliothèque jsonp :
      L'utilisation de JSONP dans le projet Vue nécessite l'installation de la bibliothèque jsonp, qui peut être installée à l'aide de npm. Exécutez la commande suivante dans le terminal pour installer :

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

      
      Une fois l'installation terminée, nous pouvons introduire la bibliothèque jsonp dans le projet Vue.
      🎜🎜🎜Créer une requête JSONP : 🎜Dans un projet Vue, nous créons généralement une requête JSONP dans une méthode d'un composant. Voici un exemple d'obtention de données météorologiques. Le code spécifique est le suivant : 🎜

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

      🎜Le code ci-dessus introduit d'abord la bibliothèque jsonp et crée une requête JSONP dans la méthode getWeather. L'URL de la requête contient un paramètre de rappel dont la valeur est le nom de la fonction de rappel défini weatherCallback. La bibliothèque JSONP transmettra les données renvoyées par le serveur dans la fonction de rappel, et nous pourrons ensuite traiter les données renvoyées dans la fonction de rappel. 🎜🎜🎜🎜Appelez la méthode dans le modèle : 🎜Dans le projet Vue, nous pouvons lier la méthode getWeather à l'événement click d'un bouton. Le code spécifique est le suivant : 🎜rrreee🎜🎜🎜Traitement des données renvoyées : 🎜In. la méthode getWeather , après avoir obtenu les données renvoyées par le serveur via JSONP, nous pouvons traiter les données, comme afficher les données sur la page. Le code spécifique est le suivant : 🎜rrreee🎜🎜🎜Résumé : 🎜Cet article présente les étapes d'utilisation de JSONP pour effectuer des requêtes inter-domaines dans le projet Vue. Tout d'abord, nous devons installer la bibliothèque jsonp, puis créer une requête JSONP dans une certaine méthode et traiter les données dans la fonction de rappel renvoyée. Enfin, appelez cette méthode dans le modèle pour afficher les données renvoyées sur la page. L'utilisation de JSONP peut résoudre certains problèmes de requêtes inter-domaines, mais vous devez prêter attention à des problèmes tels que la sécurité et la compatibilité, et faire des choix appropriés en fonction de besoins spécifiques. 🎜

   Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!