Comment implémenter Jquery ajax inter-domaines asynchrone

Cette fois, je vais vous expliquer Jquery comment implémenter ajax asynchrone cross-domain, quelles sont les précautions pour l'implémentation asynchrone cross-domain de Jquery ajax, ce qui suit est un cas pratique , jetons un coup d'oeil .

Comment résoudre rapidement le problème cross-domain asynchrone de JS ou Jquery ajax ? Ci-dessous, l'éditeur partagera avec vous une méthode pour résoudre rapidement le problème inter-domaines asynchrone Jquery ajax. J'espère que cela sera utile à tout le monde. Suivons l'éditeur et jetons un coup d'œil

En résumé simple, il existe deux solutions.

L'une est la méthode jsonp : c'est-à-dire que lorsque le front-end envoie une requête asynchrone, ajoutez les paramètres ou la configuration jsonp pertinents ; le back-end Renvoie une chaîne dans un format qui peut être analysé par jsonp.

Mais la méthode jsonp ne prend en charge que la méthode de requête get et n'est pas prise en charge par les nouvelles versions de navigateur (les nouvelles versions de navigateur effectuent principalement des requêtes OPITION - requêtes de test de sécurité asynchrones. Par conséquent, la méthode jsonp ne peut pas être passé),

Je ne connais pas grand chose ici.

L'une est la méthode cros L'avantage est qu'elle est plus sécurisée. Elle peut spécifier une liste blanche de connexion et limiter la méthode de requête. (c'est-à-dire qu'il prend en charge la méthode de requête multiple), pris en charge par tous les principaux navigateurs. Parlez principalement de la méthode d'implémentation,

Front-end : le même format que les requêtes asynchrones ordinaires, telles que :

$.ajax({ 
   url :'http://localhost:8080/myProject/test' 
    type : "GET",//不局限于get 
   data:{"key1":value1,"key2":value2}, 
   async : true, 
   success : function(data) { 
    var dataObj=eval("("+data+")"); 
     console.log(dataObj); 
     
   }, 
   error : function(data) { 
    alert( "服务器连接失败 ajaxJsonp" ); 
   } 
  });

Backend : définir principalement les paramètres d'en-tête de réponse

response.setHeader("Access-Control-Allow-Origin", "*");//设置可跨域资源共享的域名，只能设置一个具体的域名，但*可以代表所有 
response.setHeader("Access-Control-Allow-Methods","GET,POST,PUT,OPTIONS");//设置可跨域资源共享的请求方式 
  response.setHeader("Access-Control-Allow-Credentials","true"); 
  response.setHeader("Access-Control-Allow-Headers" ,"Origin, X-Requested-With, Content-Type, Accept");

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez payer. attention aux autres articles connexes sur le site PHP chinois !

Lecture recommandée :

Comment le plug-in jquery imprime-t-il le contenu de la page

Comment jQuery exécute-t-il la page pour déclencher des événements de clic par défaut

Comment utiliser et cliquer dans jquery

Explication détaillée du passage de valeur dans l'arborescence forme en layui

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!