Discutons maintenant des questions connexes des données de demande de domaine croisé du navigateur. Il n'est peut-être pas très standard de dire que cela est dû au fait que la rejet des données de demande de domaine croisé n'est pas unique au navigateur. La raison pour laquelle le domaine croisé ne peut pas demander des données est que les navigateurs implémentent essentiellement une spécification de sécurité appelée "politique d'origine même". Quelle est la spécification spécifique? Nous avons trouvé un profil sur MDN avec l'adresse suivante:
Explication de la politique homologue du navigateur
En général, lorsque l'URL A et l'URL B diffèrent en termes de protocole, de port et de nom de domaine, le navigateur lancera une politique d'origine homosexuelle et refuse les demandes de données entre les serveurs A et B.
Lorsque vous parlez de la stratégie homosexuelle, les connaissances que vous obtenez sont superficielles. Vous devez le pratiquer vous-même. Comment la stratégie homosexuelle est-elle reflétée? Ci-dessous, je vais démontrer étape par étape en combinaison avec le code.
1. Serveur A ne peut pas demander le serveur B
Comme c'est un domaine croisé, je suppose que j'ai deux noms de domaine, à savoir un et localhost. A signifie que l'éditeur héberge le nom de domaine sur Alibaba Cloud. LocalHost, comme son nom l'indique, est ma machine de développement. Nous imaginons un scénario dans lequel nous déploiement un fichier index.html sur localhost, un simple service backend spring-boot sur le serveur A, et fournissez une interface simple pour l'exposer à l'appel de fichier index.html. Enfin, le navigateur demande le fichier index.html de localhost et voir ce que le navigateur invite?
index.html
<! Doctype html> <html> <éad- head> <itle> Test Cross-Domain Access </ Title> <Meta Charset = "utf-8" /> </ head> <body> <script src = "https://cdn.bootcsss.com/jquery/3.3.1/jquery.min.js"> </cript> $ (document) .ready (function () {$ .ajax ({type: "get", async: true, url: "http: //a/hello/map/getuser.json", // demandez le type d'interface sur le serveur a: "json", Success: function (data) {// imprimer les données renvoyées Console.log ("Success, and return data is" + data); }); </cript> <h2> bonjour le monde </h2> </ body> </html>Demandez le fichier index.html sur le navigateur, et il s'affiche comme suit:
On peut constater que la demande a été rejetée par le navigateur, ce qui nous a incité à ne pas autoriser les demandes de domaine croisé. C'est très inconfortable. Comment le résoudre?
2. Utilisez JSONP pour résoudre les demandes de domaine croisé
Tout d'abord, parlons du principe. JSONP résout les problèmes de domaine transversal utilise principalement la domainabilité croisée de la balise <cript>, c'est-à-dire que la fonctionnalité que l'adresse de liaison dans l'attribut SRC est accessible entre les domaines, car nous définissons souvent la valeur d'attribut SRC à l'adresse de CDN, et la bibliothèque JS pertinente a été chargée.
index.html
<! Doctype html> <html> <éad- head> <itle> Test Cross-Domain Access </ Title> <Meta Charset = "utf-8" /> </ head> <body> <script src = "https://cdn.bootcsss.com/jquery/3.3.1/jquery.min.js"> </cript> $ (document) .ready (function () {$ .ajax ({type: "get", async: true, jsonp: "callbackname", // backend interface du paramètre nom jsonpcallback: "callbackfunction", // callback function name url: "http: //a/hello/map/getuser.json", dataty est JSONP Success: Function (Data) {Console.log ("Success");}}); </ script> <script type = "text / javascript"> var callbackFunction = function (data) {alert ('Les données renvoyées par l'interface sont:' + json.stringify (data)); }; </cript> </ body> </html>Le code d'interface sur le serveur A est:
/ ** * * La classe JSONBackController. * * Description: Le contrôleur renvoie une chaîne de données JSON simples, et les données JSON sont composées d'un simple objet utilisateur * * @Author: HuangjiahEi * @Since: 12 juin 2018 * @version: $ Revision $ $ Date $ $ LastChangedBy $ * * / @ restController @ requestmapping (Value = "Map") CLASS PUBLICAL LoggerFactory.getLogger (JSONBackController.class); / ** * Résoudre les données de la demande de domaine croisé * @param réponse * @param callbackname Front-end fection function name * @return * / @requestmapping (value = "getuser.json") public void geserer (httpservletResponse réponse, @requestparam string callbackName) {utilisateur utilisateur = new user ("huangjawawewei", 22); réponse.setContentType ("Text / JavaScript"); Écrivain écrivain = null; essayez {writer = réponse.getWriter (); writer.write (callbackname + "("); writer.write (user.toString ()); writer.write (");"); } catch (ioException e) {logger.Error ("JSONP Response écriture a échoué! Données:" + user.toString (), e); } enfin {if (writer! = null) {try {writer.close (); } catch (ioException e) {logger.Error ("Stream Stream Fermer Exception!", E); } writer = null; }}}}Le backend passe dans un nom de fonction de rappel de calcul de paramètre, puis renvoie un morceau de code js sur le frontend. Le format de code JS est le suivant:
callbackName + ( data ) + ;
Le navigateur demande le fichier index.html sur le serveur localhost, et le résultat est le suivant:
La méthode ci-dessus résout les problèmes de domaine transversal via jQuery + JSONP. N'avez-vous pas simplement dit que vous pouvez utiliser l'attribut SRC de la balise <cript>? Quatre.
index.html sur le serveur localhost
<! Doctype html> <html> <éad- head> <ititle> Test Cross-Domain Access </ title> <meta charset = "utf-8" /> </ head> <body> <script src = "https://cdn.bootcsss.com/jquery/3.3.1/jquery.min.js"> </cript> callbackFunction = function (data) {alert ('Les données renvoyées par l'interface sont:' + json.stringify (data)); }; </ script> <script type = "text / javascript" src = "http: //a/hello/map/getuser.json? callbackname = callbackfunction"> </ script> </ body> </html>L'effet d'affichage du navigateur est le même que ci-dessus. Mais il convient de noter ici que SRC signifie introduire un fichier JS. Puisqu'il est appelé directement par l'interface et que les données renvoyées par l'interface se trouvent être un morceau de code JS, il peut être exécuté. De plus, l'ordre de la deuxième balise <cript> ne peut pas être inversé, sinon la fonction de calcul de rappel ne sera pas trouvée.
Adresse du code du projet: https://github.com/smallercoder/jsonpdemo
Enfin, pour résumer, il existe de nombreuses solutions pour les solutions inter-domaines, JSONP n'est que l'un d'entre eux, et la situation spécifique doit être analysée en détail. J'espère que cet article vous sera utile. Merci d'avoir lu. Bienvenue à Github pour commencer, Momo! J'espère également que tout le monde soutiendra davantage Wulin.com.