Concernant les problèmes inter-domaines jsonp dans vue-resource

Ci-dessous, je vais partager avec vous une solution au problème inter-domaines basée sur vue-resource jsonp. Elle a une bonne valeur de référence et j'espère qu'elle sera utile à tout le monde.

J'ai récemment rencontré un problème de requête inter-domaines ajax lors de l'apprentissage de vue.js. Je savais qu'il pouvait être résolu avec jsonp auparavant, mais je ne l'ai jamais pratiqué cette fois, j'ai trouvé beaucoup de problèmes. Je vais l'enregistrer maintenant. J'espère que cela pourra être résolu. Donnez de l'aide aux étudiants qui débutent dans l'utilisation de jsonp !

Je n'en dirai pas beaucoup plus sur ce qu'est jsonp et pourquoi jsonp est utilisé. Les étudiants qui ne comprennent pas peuvent le rechercher sur Baidu.

Parlons d'abord de la requête jsonp dans jQuery. Il sera facile de comprendre le jsonp dans vue-resource.

Ici, je prends les données json comme exemple. Tout d'abord, nous pouvons obtenir directement un objet que nous voulons via $.get, mais lors de l'utilisation de jsonp, le code d'erreur apparaîtra comme suit,

$.ajax({
 url:"http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1",
 type:"GET",
 dataType:"jsonp",
 sccuess:function(data){
  console.log(data)
 }
})

À ce moment-là, nous avons constaté que la console n'émettait pas de données comme prévu, mais signalait une erreur.

À ce moment-là, nous vérifions le réseau et voyons que les données ont effectivement été demandées

Nous pouvons voir que la demande a réussi Oui, le code d'état est 200 et les données sont renvoyées, mais pourquoi une erreur est-elle toujours signalée ?

Cela nous oblige à analyser le principe de jsonp :

Tout d'abord, lors de l'envoi d'ajax, normalement nous obtenons un morceau de données json, mais JS n'est pas pratique pour exploiter directement les données json, jQuery les a automatiquement analysées dans un objet JS pour nous pour le moment

Nous savons tous que jsonp équivaut en fait au chargement des données à l'aide d'un script de chargement JavaScript

En parlant de ça, je pense que certains étudiants ont probablement compris pourquoi l'erreur est signalée. En fait, à ce moment-là, un script est directement ajouté à la page, et le contenu à l'intérieur est constitué des données qui nous sont renvoyées

<script src="http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1"></script>

<.>Maintenant, réfléchissons-y à nouveau, ce code JavaScript est en fait un objet dénué de sens, car vous ne pouvez pas l'obtenir sans l'attribuer à une variable, donc en ce moment, nous avons besoin de la coopération de nos collègues d'arrière-plan, je crois que quand il En arrivant à cela, tout le monde devrait savoir comment le faire, nous n'entrerons donc pas dans les détails de l'ajax de jQuery.

Aujourd'hui, nous parlons principalement du problème de requête inter-domaines jsonp dans vue-resource

Sans plus tard, passons directement au code :

var vm = new Vue({
 el:'#signRecord',
 data:{},
 beforeMount:function(){
  this.$http.jsonp("http://192.168.8.59/weixinvip/VIP/ERP/Home/api.ashx?a=getwxativity&i=1")
  .then(function(data){
   console.log(data)
  })
 }
})

La même erreur a été signalée, et vue-resource nous a signalé une erreur supplémentaire. Jetons un coup d'œil au réseau

<.>

La même demande a abouti et les données ont été obtenues, mais une erreur a été signalée. Si nous regardons l'en-tête de la requête, nous constaterons qu'il y a un paramètre supplémentaire

A quoi sert ce paramètre ? Jetons un coup d'œil au code source

Ici, nous pouvons voir que le rappel est en fait une chaîne générée aléatoirement, et nous pouvons également nommer ce paramètre nous-mêmes, si ce n'est pas le cas spécifié , la valeur par défaut est "callback", puisque

est le paramètre passé par défaut, il doit être utile.

En fait, vue a deux paramètres lors de l'envoi de jsonp. Jetons un coup d'oeil

Ici, params est l'objet de données à envoyer, et jsonp est le nom du rappel, qui est le rappel ci-dessus. Name; (la valeur par défaut est callback s'il n'est pas défini), nous avons maintenant besoin d'une assistance en arrière-plan

Vue.http.jsonp(url,{params: {pageID:29},jsonp:"_callback"}) //这步就是关键，改callback名

pour obtenir la valeur de "_callpack" que nous avons envoyée et intégrer cette valeur dans les données json renvoyées. À ce moment-là, vous pouvez Compris !

Ce qui précède est ce que j'ai compilé pour vous. J'espère que cela vous sera utile à l'avenir.

Articles associés :

Comment utiliser JavaScript pour obtenir des prix différents chaque jour dans la plage de dates

Comment implémenter le chargement d'image composant en vue

Pourquoi Node.js deviendra-t-il le développement d'applications web ?

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!