Qu'est-ce que le cross-domain ? Combien de formulaires de mise en œuvre existe-t-il pour le cross-domain ?

Le cross-domain est souvent rencontré en js, et cet article l'expliquera en détail.

La politique de même origine est un bon mécanisme de sécurité, mais nous avons parfois besoin d'obtenir des données ou d'interagir avec différents domaines. À ce stade, la politique de même origine provoquera des obstacles.
Le cross-domain consiste à réaliser la transmission et l'interaction d'informations de données provenant de différentes sources.
Il existe plusieurs façons de réaliser du cross-domain :
1.JSONP
JSONP est l'abréviation de JSON avec remplissage (JSON paramétrique) et est une nouvelle méthode d'application de JSON.
L'implémentation de JSONP repose sur l'utilisation d'éléments <script> dynamiques, car <script> n'est pas limité par la politique de même origine et a la capacité de charger des ressources à partir d'autres domaines. Exemple : <br/>Requête. via <script> Renvoyer un JSONP</script>

<script src=""http://freegeoip.net/json/?callback=handleResponse></script>

Le JSONP renvoyé se compose de deux parties : la fonction de rappel et les données JSON

handleResponse(JSON)

Due pour passer <script> Les données demandées par la balise seront exécutées sous forme de code js, donc la fonction de rappel traitera les données JSON. Dans cet exemple, la fonction de rappel est handleResponse. Habituellement, le nom de la fonction de rappel est écrit dans l'URL de la requête en tant que paramètre et la fonction de rappel est définie localement. <br/>Inconvénients : JSONP charge le code d'autres domaines pour exécution. Si d'autres domaines ne sont pas sécurisés, la réponse est susceptible de contenir du code malveillant. Pour le moment, il n'y a aucun moyen de le poursuivre, sauf en abandonnant l'utilisation de JSONP, donc le la sécurité de la source de données doit être assurée. <br/>2.CORS<br/>CORS (Cross-Origin Resource Sharing, cross-domain resources Sharing) est une méthode de requêtes inter-domaines Ajax. Elle définit comment le navigateur et le serveur doivent communiquer lorsque les ressources inter-domaines doivent être. accédé. <br/>L'idée de base derrière CORS est d'utiliser des en-têtes HTTP définis pour permettre au navigateur de communiquer avec le serveur afin de déterminer si la requête ou la réponse doit réussir. <br/>CORS est divisé en requêtes simples et requêtes complexes <br/> Une requête simple qui remplit simultanément les deux conditions suivantes est une requête simple : <br/>1 La méthode de requête est l'une des méthodes get, post et head. ; <br/>2. Les informations d'en-tête de requête ne dépassent pas ces champs : Accept, Accept-Language, Content-Language, Last-Event-ID et Content-Type sont limités à trois valeurs application/x-www-form. -urlencoded, multipart/form-data, text/plain<br/>Exemple de requête simple :<br/>Lorsque nous envoyons une requête simple entre domaines, un en-tête Origin sera défini pour indiquer la source de la requête</script>

Oring : http://www.baidu.com //Indiquez que cette demande est émise par http://www.baidu.com

Si le serveur pense que cette demande est acceptable, il le fera renvoie la même chose dans l'en-tête Access-Control-Allow-Origin (en supposant qu'il s'agit d'une ressource publique, vous pouvez renvoyer "*")

Access-Control-Allow-Origin : http://www. .baidu.com

S'il n'y a pas de this Si l'en-tête ou les informations source de l'en-tête ne correspondent pas, le navigateur interceptera la réponse renvoyée.
À l'exception des demandes simples, ce sont toutes des demandes complexes
Les demandes complexes sont similaires aux demandes simples, sauf qu'avant d'envoyer une demande formelle, une demande de contrôle en amont sera envoyée pour confirmer si le domaine actuel est dans la plage d'autorisations du serveur et le serveur peut l'accepter. Quelles informations d'en-tête HTTP, méthode de demande, type de données, etc. La communication formelle ne commencera pas tant que l’autorisation n’aura pas été reçue.
Voici les en-têtes de requête de contrôle en amont et les en-têtes de réponse

//Il s'agit d'un en-tête de requête de contrôle en amont OPTIONS /cors HTTP/1.1 //Notez que la requête renvoie des options ; Origine : https://api. qiutc .me //Source de la demande ; Access-Control-Request-Method : PUT //Méthode de demande Access-Control-Request-Headers : X-Custom-Header //Informations supplémentaires sur l'en-tête de la demande ; >Accepter-Langue : en-US
Connexion : keep-alive
User-Agent : Mozilla/5.0...
//Ceci est un en-tête de réponse de contrôle en amont HTTP/1.1 200 OKDate : lundi 1er décembre 2008 01:15:39 GMT
Serveur : Apache/2.0.61 (Unix)
Access-Control-Allow-Origin : https://api.qiutc.meAccess-Control-Allow-Methods : GET, POST , PUT //Indique toutes les méthodes inter-domaines prises en charge par le serveur Access-Control-Allow-Headers : X-Custom-Header //Indique des en-têtes de requête supplémentaires pris en charge par le serveur Content-Type : text/html charset=utf-8Content; -Encodage : gzip
Content-Length : 0Keep-Alive : timeout=2, max=100Connection : Keep-Alive
Content-Type : text/plain

Cet article explique en détail plusieurs domaines problèmes connexes. Pour plus de contenu connexe, veuillez prêter attention au site Web chinois php.

Recommandations associées :

Résumé des événements de fonction

Compréhension associée des expressions régulières

Utilisation de ceci en Javascript

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!