La solution parfaite aux requêtes cross-domaines (JSONP, CORS) (tutoriel image et texte, avec code)

Maintenant, je vais vous proposer une solution parfaite pour les requêtes inter-domaines (JSONP, CORS). Permettez-moi de le partager avec vous maintenant et de le donner comme référence pour tout le monde.

Un problème bien connu est qu'Ajax demande directement des fichiers ordinaires, ce qui provoque un accès non autorisé entre domaines. Les solutions incluent JSONP, Flash, etc.

JSONP

Nous avons constaté que lors de l'appel de fichiers js sur une page Web, il n'est pas affecté selon qu'il s'agisse de plusieurs domaines ou non. . Tous les fichiers avec l'attribut "src". Toutes les balises ont des fonctionnalités inter-domaines, telles que 3f1c4e4b6b16bbbd69b2ee476dc4f83a, a1f02c36ba31691bcfe87b2722de723b, d5ba1642137c3f32f4f4493ae923989c. C'est-à-dire que si vous souhaitez accéder aux données sur plusieurs domaines, le serveur ne peut placer les données que dans des fichiers au format js. Il se trouve que nous savons que JSON peut décrire des données complexes de manière concise, et JSON est également pris en charge nativement par js, de sorte que le client peut traiter les données dans ce format presque comme il le souhaite. Ensuite, le client peut appeler le fichier au format js généré dynamiquement sur le serveur inter-domaines exactement de la même manière qu'il appelle le script. Une fois que le client a appelé avec succès le fichier JSON, il obtient les données dont il a besoin. Cela constitue le concept de base de JSONP. Les utilisateurs sont autorisés à transmettre un paramètre de rappel au serveur, puis lorsque le serveur renvoie des données, il utilisera ce paramètre de rappel comme nom de fonction pour envelopper les données JSON, afin que le client puisse personnaliser sa propre fonction pour traiter automatiquement le retour. données.

jQuery prend en charge les appels JSONP. Après avoir spécifié le nom de la fonction de rappel dans un autre nom de domaine, vous pouvez utiliser le formulaire suivant pour charger les données JSON.

url?callback=?
jQuery.getJSON(url + "&callback=?", function(data) { 
 alert(data.a + data.b); 
});

Bien sûr, le serveur doit également fournir le support JSONP. En fait, il lui suffit de fournir les paramètres de rappel en lecture et en écriture.

Partage de ressources d'origine croisée (CORS)

Le partage de ressources d'origine croisée (CORS) est un travail du W3c brouillon, il définit la manière dont le navigateur et le serveur communiquent lors de l'accès aux ressources sur plusieurs domaines. L'idée de base derrière CORS est d'utiliser des en-têtes HTTP personnalisés pour permettre au navigateur et au serveur de se comprendre et de déterminer si la requête ou la réponse a abouti.

CORS est plus avancé, plus pratique et plus fiable que JSONP.

1. JSONP ne peut implémenter que les requêtes GET, tandis que CORS prend en charge tous les types de requêtes HTTP.

2. Grâce à CORS, les développeurs peuvent utiliser XMLHttpRequest ordinaire pour lancer des requêtes et obtenir des données, ce qui offre une meilleure gestion des erreurs que JSONP.

3. JSONP est principalement pris en charge par les anciens navigateurs, qui souvent ne prennent pas en charge CORS, alors que la plupart des navigateurs modernes prennent déjà en charge CORS.

Pour une requête simple, sans en-têtes personnalisés, utilisez GET ou POST, son corps est en texte/plain, et la requête est envoyée avec un en-tête supplémentaire appelé Origin. L'entête Origin contient les entêtes de la page demandée (protocole, nom de domaine, port) afin que le serveur puisse facilement décider s'il doit fournir une réponse.

Le côté serveur prend en charge CORS principalement en définissant Access-Control-Allow-Origin.

En-tête défini Access-Control-Allow-Origin *

Afin d'empêcher XSS d'attaquer notre serveur, nous pouvons restreindre des domaines, tels que comme

Access-Control-Allow-Origin : http://www.jb51.net

De nombreux services fournissent déjà un support CORS, tels que Comme AWS prend en charge la fonction de partage de ressources inter-domaines CORS, aucun proxy n'est requis pour le téléchargement vers S3.

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

Articles associés :

Focus sur les techniques de réécriture de la méthode alert() en JavaScript

Syntaxe de base et variables de JavaScript Expliquer

Surcharge de simulation Javascript, réponses détaillées à la réécriture de la méthode toString

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!