Que dois-je faire si l'interface ne peut pas être appelée lorsque Uniapp est publié en tant que h5 ?

Récemment, de nombreux développeurs ont rencontré un problème lors de la création d'applications à l'aide d'uniapp : après avoir publié l'application en tant que H5, l'interface API ne peut pas être appelée. Ce problème peut sembler difficile à résoudre, mais en réalité, quelques ajustements suffisent pour le résoudre.

Tout d’abord, comprenons ce qu’est uniapp. uniapp est un framework de développement multiplateforme basé sur Vue.js qui prend en charge la publication multi-extrémité, notamment H5, iOS, Android et d'autres plateformes. L'émergence d'uniapp permet aux développeurs d'utiliser Vue.js pour développer des applications natives, et de n'avoir besoin d'écrire du code qu'une seule fois pour le publier sur plusieurs plates-formes en même temps.

Cependant, lorsque nous publions l'application uniapp en tant que H5, nous pouvons constater que l'interface API ne peut pas être appelée. Cela est dû à des problèmes inter-domaines. Lorsque nous accédons à une page dans un navigateur, si la page doit appeler une interface API d'un domaine différent, le navigateur bloquera cette opération pour empêcher les attaques de scripts intersites.

Alors, comment résoudre ce problème ?

Une solution courante consiste à mettre en place CORS (Cross-Origin Resource Sharing) côté serveur. CORS est un mécanisme qui permet aux applications sous le même nom de domaine d'accéder à des ressources sous un autre nom de domaine. L'utilisation de CORS nécessite la définition des informations d'en-tête de réponse côté serveur pour permettre l'accès inter-domaines par le client. Cependant, pour de nombreux développeurs, cela n'est pas très facile à mettre en œuvre car cela peut nécessiter de modifier la configuration du serveur ou de trouver un fournisseur de services prenant en charge CORS.

Une autre solution consiste à utiliser JSONP. Avec la popularité des applications H5, JSONP est devenu de plus en plus populaire. JSONP est une méthode de requête inter-domaines qui permet de charger un script d'un autre domaine sur la page et les paramètres sont transmis au serveur lors du chargement. Le fonctionnement de JSONP est que le client référence un fichier JavaScript sur la page, qui déclenche une fonction de rappel et le transmet au serveur en tant que paramètre. Une fois que le serveur a reçu la demande, il encapsulera les données dans la fonction de rappel et les renverra, et le client pourra obtenir les données via la fonction de rappel.

Utiliser JSONP dans uniapp est très simple. Les requêtes inter-domaines peuvent être effectuées à l'aide de la méthode uni.request :

uni.request({
  url: 'http://example.com/api/data',
  method: 'GET',
  dataType: 'jsonp',
  success: function (res) {
    console.log(res.data)
  }
})

Dans l'exemple ci-dessus, nous définissons le dataType sur jsonp pour indiquer au serveur que nous devons utiliser JSONP pour gérer la requête. Une fois que le serveur aura reçu la demande, il renverra une réponse au format JSONP. Côté client, nous pouvons utiliser une fonction de rappel pour gérer la réponse JSONP :

function handleResponse(data) {
  console.log(data)
}

<script src="http://example.com/api/data?callback=handleResponse"></script>

Dans cet exemple, nous avons ajouté une balise de script à la page, défini l'attribut src sur l'URL de la requête et ajouté le paramètre de rappel à l'URL. . Lorsque le navigateur chargera cette URL, le serveur encapsulera les données dans la fonction de rappel et les renverra sous forme de code JavaScript. La fonction de rappel sur la page sera appelée et les données de réponse seront obtenues.

En bref, si l'application créée à l'aide d'uniapp ne peut pas appeler l'interface API après avoir été publiée en tant que H5, vous pouvez envisager d'utiliser JSONP pour résoudre le problème inter-domaines. Si CORS est plus facile à mettre en œuvre pour vous, vous pouvez également essayer de configurer CORS côté serveur. Quelle que soit la méthode utilisée, votre application peut s’exécuter normalement sur la plateforme H5.

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!