Analyse de l'accès cross-domain jsonp (front-end et back-end)

Le contenu de cet article concerne l'analyse de l'accès inter-domaines jsonp (front-end et back-end). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer. .

1. Qu'est-ce que l'accès inter-domaines

À titre d'exemple  : Dans le site Web A, nous espérons utiliser Ajax pour obtenir un contenu spécifique dans le site Web B. Si le site Web A et le site Web B ne se trouvent pas dans le même domaine, il y aura alors un problème d'accès entre domaines. Vous pouvez comprendre que deux noms de domaine ne peuvent pas envoyer de requêtes ou demander des données entre noms de domaine, sinon cela serait dangereux. L'accès entre domaines viole la politique de même origine. Pour des informations détaillées sur la politique de même origine, vous pouvez cliquer sur le lien suivant : Same-origin_policy
En bref, la politique de même origine stipule que l'ajax du navigateur peut accéder uniquement à la même origine (même origine) que les ressources de sa page HTML (Nom de domaine ou IP).

2. Qu'est-ce que JSONP

JSONP (JSON with Padding) est un "mode d'utilisation" de JSON qui peut être utilisé pour résoudre le problème de l'accès aux données inter-domaines par les navigateurs grand public.

En raison de la politique de même origine, d'une manière générale, les pages Web situées sur server1.example.com ne peuvent pas communiquer avec des serveurs autres que server1.example.com, et l'élément HTML 3f1c4e4b6b16bbbd69b2ee476dc4f83a est une exception. Grâce à cette stratégie ouverte de l'élément 3f1c4e4b6b16bbbd69b2ee476dc4f83a, les pages Web peuvent obtenir des données JSON générées dynamiquement à partir d'autres sources, et ce modèle d'utilisation est ce qu'on appelle JSONP. Les données capturées avec JSONP ne sont pas du JSON, mais du JavaScript arbitraire, qui est exécuté avec un interpréteur JavaScript au lieu d'être analysé avec un analyseur JSON. Des principes plus spécifiques nécessitent plus d'espace pour être expliqués et vous pouvez vous rendre à Baidu par vous-même.

3. Utilisation de JSONP

Exemples d'utilisation front-end

JQuery Ajax encapsule très bien JSONP et il est très pratique pour nous de l'utiliser. Exemple front-end :

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

Ce qu'il faut noter est :

• dataType, ce paramètre doit être défini sur jsonp

• jsonp, la valeur de ce paramètre doit être convenue avec le serveur, les détails sont présentés ci-dessous. (La valeur par défaut conventionnelle est le rappel)

Exemple de coopération backend

Principe JQuery Ajax Jsonp

Pour utiliser jsonp avec le backend, vous devez d'abord Comprendre une fonctionnalité de Jquery Ajax jsonp :
Lorsque Jquery envoie une requête Ajax jsonp, il ajoutera automatiquement un paramètre de vérification après le lien d'accès. Ce paramètre est généré aléatoirement par Jquery, comme le lien
http://www.deardull.com:9090/getMySeat?callback=jQuery31106628680598769732_1512186387045&_=1512186387046 , le paramètre
est automatiquement ajouté par jquery. callback=jQuery31106628680598769732_1512186387045&_=1512186387046Le but de l'ajout de ce paramètre est d'identifier de manière unique cette demande. Lorsque le serveur reçoit la requête, il doit construire la valeur du paramètre avec la valeur json réelle à renvoyer (comment la construire est expliquée ci-dessous), et la renvoyer, et le front-end vérifiera ce paramètre si c'est le cas. le paramètre qu'il a envoyé auparavant, alors les données seront reçues et analysées. Si ce n'est pas ce paramètre, elles seront rejetées.
Ce qui nécessite une attention particulière, c'est le nom de ce paramètre de vérification (j'ai perdu 2 heures sur ce pit). Ce nom vient de la valeur du paramètre front-end
jsonp. Si la valeur du paramètre jsonp frontal est modifiée en "aaa", alors le paramètre correspondant doit être aaa=jQuery31106628680598769732_1512186387045&_=1512186387046

Réception et traitement back-end

I Connaître Jquery A jaxJsonp Le principe et les paramètres à accepter sont connus, et nous pouvons écrire le programme côté serveur.

Afin de coopérer avec json, ce que le serveur doit faire peut être résumé en deux étapes :

La première étape consiste à recevoir les paramètres de vérification

Recevoir la vérification selon le paramètre jsonp nom convenu avec les paramètres Ajax front-end, les exemples sont les suivants (en utilisant SpringMVC, les principes d'autres langages et frameworks sont similaires)

    @ResponseBody
    @RequestMapping("/getJsonp")
    public String getMySeatSuccess(@RequestParam("callback") String callback){

La deuxième étape consiste à construire les paramètres et à renvoyer

Comparez le rappel du paramètre de vérification reçu avec celui réel à renvoyer. Les données json sont construites selon la méthode "callback(json)" :

     @ResponseBody
    @RequestMapping("/getMySeat")    
    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();   //google的一个json工具库
        Map<String,String> map=new HashMap<>();        
        map.put("seat","1_2_06_12");        
        return callback+"("+gson.toJson(map)+")";   //构造返回值
    }

4. Résumé

Enfin, le code correspondant du front et du back end devrait ressembler à ceci :

Front end

    $.ajax({
            type:"GET",
            url:"http://www.deardull.com:9090/getMySeat", //访问的链接
            dataType:"jsonp",  //数据格式设置为jsonp
            jsonp:"callback",  //Jquery生成验证参数的名称
            success:function(data){  //成功的回调函数
                alert(data);
            },
            error: function (e) {
                alert("error");
            }
        });

Backend

    @ResponseBody
    @RequestMapping("/getMySeat")    
    public String getMySeatSuccess(@RequestParam("callback") String callback){
        Gson gson=new Gson();        
        Map<String,String> map=new HashMap<>();        
        map.put("seat","1_2_06_12");
        logger.info(callback);        
        return callback+"("+gson.toJson(map)+")";
    }

Ce qu'il faut noter est :

• Attention front-end et back-end Pour communiquer la valeur convenue de jsonp, le rappel est généralement utilisé par défaut.

• Une fois que le backend a obtenu les paramètres en fonction du nom du paramètre jsonp, il doit être construit de manière "callback(json)" avec les données json à renvoyer.

• Si vous souhaitez tester, pensez à le faire dans un environnement cross-domain (deux machines).

L'exemple complet est constitué des deux morceaux de code ci-dessus, qui sont efficaces dans les tests personnels.

Recommandations associées :

Accès inter-domaines JSONP CORS_html/css_WEB-ITnose

La requête GET inter-domaines JSONP est résolue Problème d'accès au domaine inter-domaines Ajax_json

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!