Partager des solutions aux problèmes inter-domaines en JavaScript-js tutoriel-php.cn

Partager des solutions aux problèmes inter-domaines en JavaScript

黄舟

Libérer： 2017-07-18 10:02:19

original

1468 Les gens l'ont consulté

Cet article présente principalement des informations pertinentes sur les problèmes et solutions inter-domaines Javascript. Les amis dans le besoin peuvent se référer à

Problèmes et solutions inter-domaines Javascript

<.>Qu'est-ce qu'un problème inter-domaines ?

Ce problème inter-domaines est causé par la politique de même origine du navigateur. L'adresse URL demandée doit être le même protocole, le même nom de domaine et le même port que l'URL du navigateur, sinon, il n'est pas autorisé.

浏览器URL	要访问的URL	结果
http://www.123.com/index	http://www.123.com/server	成功
http://www.123.com/index	http://www.456.com/server	域名不相同，跨域
http://www.123.com:8080/index	http://www.123.com:8888/index.htm	端口不同，跨域
http://www.123.com/index	https://www.123.com/index	协议不同，跨域

Solution

Toute balise avec l'attribut src peut traverser des domaines, tels que les balises script, img, iframe.

JSONP

JSONP est l'application de balises de script. Le nom complet de JSONP est JSON With Padding. Il se compose de deux parties, la fonction de rappel et les données. La fonction de rappel correspond au moment où la réponse arrive. La fonction qui doit être appelée dans la page, le nom de la fonction de rappel est spécifié dans la requête et les données sont les données JSON transmises à la fonction de rappel

Exemple. :

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>

<script type="text/javascript">
  function jsonCallback(data){
    alert(data);
  };
  var url = "http://localhost:8888/test?callback=jsonCallback";
  var script = document.createElement(&#39;script&#39;); 
  script.type = "text/javascript";
  script.setAttribute(&#39;src&#39;, url); 
  document.getElementsByTagName(&#39;head&#39;)[0].appendChild(script);
</script>
</head>
<body>
</body>
</html>

Copier après la connexion

Inconvénients : Il n'est pas facile de confirmer si la requête JSONP a échoué

Problèmes de sécurité, JSONP est exécuté en chargeant du code depuis d'autres domaines , sa fiabilité doit donc être déterminée

La cause du problème inter-domaines

Le problème inter-domaines est dû à la restriction de la politique de même origine du navigateur Le js du courant. Le nom de domaine ne peut lire que les attributs de fenêtre du même domaine.

Scénarios dans lesquels des problèmes inter-domaines surviennent

Lorsque js est utilisé dans la page pour obtenir des données d'autres sites Web, des problèmes inter-domaines se produiront, comme l'utilisation d'ajax dans le site Web pour demander des données à partir d'autres sites Web Lorsque vous demandez des données à partir d'interfaces de données météorologiques, express ou autres et d'applications hybrides, le navigateur affichera l'erreur suivante. Dans ce scénario, nous devons résoudre le problème inter-domaines de js.

XMLHttpRequest cannot load http://你请求的域名. No &#39;Access-Control-Allow-Origin&#39; header is present on the requested resource. Origin &#39;http://当前页的域名&#39; is therefore not allowed access.

Copier après la connexion

Quelles situations entraîneront des problèmes entre domaines ?

L'URL d'un site Web comprend le nom du protocole, le nom du sous-domaine, le nom de domaine principal et le numéro de port. Par exemple, https://github.com/, où https est le nom du protocole, www est le nom du sous-domaine, github est le nom de domaine principal et le numéro de port est 80. Lors de la demande de données à partir d'une URL dans la page, si le nom de protocole de cette URL. Si l'un des noms de sous-domaines, des noms de domaine principaux et des numéros de port est différent, des problèmes inter-domaines se produiront.

Même si la demande de page http://127.0.0.1:80/ est sur http://localhost:80/, il y aura des problèmes inter-domaines

Résoudre les problèmes inter-domaines

Résoudre les problèmes inter-domaines Les problèmes de domaine peuvent être résolus des manières suivantes

Utiliser jsonp

Proxy du serveur
Le serveur définit Access-Control-Allow-Origin dans l'en-tête de la demande pour spécifier le nom de domaine à partir duquel les données peuvent être obtenues

La solution de Jsonp

json≠jsonp

Principe

Le principe de la solution de jsonp aux problèmes inter-domaines est que la balise de script du navigateur n'est pas restreinte par la même politique d'origine (vous pouvez définir l'attribut src du script dans votre page Web pour demander le chemin du fichier statique sur le serveur CDN). Ensuite, vous pouvez utiliser la balise de script pour obtenir des données du serveur lors de la demande, ajoutez un paramètre appelé callbakc=?, où le numéro est la méthode de rappel que vous souhaitez exécuter.

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!