Il existe plusieurs façons de résoudre les problèmes inter-domaines avec ajax

Ajax dispose de trois méthodes pour résoudre les problèmes inter-domaines : 1. Utilisez un proxy pour obtenir du contenu sous d'autres noms de domaine en arrière-plan, puis renvoyez le contenu obtenu au front-end afin qu'il se trouve sous le même nom de domaine ; . Utilisez JSONP, cette méthode prend uniquement en charge get Request, chargez les données dans un fichier js sur le serveur distant pour l'appel du client et le traitement ultérieur ; 3. Utilisez "LHttpRequest Level 2", la syntaxe est "header('Access-Control-Allow) -Origine:*')".

L'environnement d'exploitation de cet article : système Windows10, version javascript1.8.5&&html5, ordinateur Dell G3.

Il existe trois façons de résoudre l'ajax inter-domaines

Domaine : Le domaine est la limite de sécurité du système réseau WIN2K. Nous savons que l'unité la plus élémentaire d'un réseau informatique est un « domaine ». Ce n'est pas unique à WIN2K, mais Active Directory peut fonctionner via un ou plusieurs domaines. Sur un ordinateur indépendant, un domaine fait référence à l'ordinateur lui-même. Un domaine peut être distribué sur plusieurs emplacements physiques. Dans le même temps, un emplacement physique peut être divisé en différents segments de réseau en différents domaines. sa relation avec les relations de confiance avec d'autres domaines. Lorsque plusieurs domaines sont connectés via des relations d'approbation, Active Directory peut être partagé par plusieurs domaines d'approbation.

En raison de la nécessité d'utiliser AJAX pour demander des requêtes sous d'autres noms de domaine au travail, l'accès sera refusé car, pour des raisons de sécurité, AJAX ne peut accéder qu'aux ressources locales et ne peut pas accéder aux ressources inter-domaines.

Par exemple, si le nom de domaine de votre site Web est aaa.com et que vous souhaitez demander le contenu du nom de domaine bbb.com via AJAX, le navigateur le considérera comme dangereux et refusera l'accès.

Il existe plusieurs situations dans lesquelles des problèmes inter-domaines peuvent survenir :

Au total, trois solutions sont résumées : proxy, JSONP et XHR2 (XMLHttpRequest niveau 2).

La première méthode est proxy : Cette méthode consiste à obtenir le contenu sous d'autres noms de domaine via le backend (ASP, PHP, JAVA, ASP.NET), puis à renvoyer le contenu obtenu au front-end, de sorte que car il se trouve dans le même nom de domaine, il n'y aura donc pas de problèmes entre domaines.

Code d'implémentation : Créez une requête AJAX (l'adresse de la page est : http://localhost/ajax/proxy.html)

var request = null;
if(window.XMLHttpRequest){
request = new XMLHttpRequest();
}else{
request = new ActiveXObject("Microsoft.XMLHttp");
}
request.onreadystatechange = function(){
console.log(this.readyState);
if(this.readyState===4 && this.status===200){
var resultObj = eval("("+this.responseText+")"); //将返回的文本数据转换JSON对象
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex; //将返回的内容显示在页面中
}
}
request.open("POST","proxy.php",true);
request.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
request.send("name=吕铭印&sex=男");

Créez une requête AJAX.

code proxy.php

header("Content-type:text/html;charset=utf-8");
$url = "http://localhost:63342/ajax/proxy.js";
$contents = file_get_contents($url);
echo $contents;

Utilisez le code php pour obtenir le fichier proxy.js sous localhost:63342.

code proxy.js

{
name : "吕铭印",
sex : "男"
}

proxy.html résultats en cours d'exécution

À ce stade, utilisez un proxy pour accéder aux fichiers entre différents domaines.

Utilisez d'abord AJAX pour accéder au fichier proxy.php en arrière-plan dans proxy.html, puis après que proxy.php ait reçu la demande, accédez au fichier proxy.js dans localhost:63342. Après avoir obtenu le contenu de proxy.js, renvoyer le contenu à La page frontale réalise des fonctionnalités inter-domaines.

Si vous souhaitez accéder à plusieurs fichiers inter-domaines, vous pouvez indiquer au fichier proxy.php en arrière-plan l'adresse du fichier auquel vous souhaitez accéder sous la forme d'un paramètre.

La deuxième méthode JSONP (ne prend en charge que les requêtes GET) : Plus tard, les gens ont découvert que lors de l'appel de fichiers Js, ils ne sont pas affectés par le cross-domain, la deuxième solution a donc été dérivée.

Il s'agit de charger les données dans un fichier js sur le serveur distant pour l'appel du client et le traitement ultérieur.

jsonp.html

var url = "http://localhost:63342/ajax/jsonp.php?name=吕铭印&sex=男&callbackname=jsonp_callback"; //访问localhost:63342下的jsonp.php
var scriptTag = document.createElement("script"); //创建一个script标签
scriptTag.setAttribute("src",url); //设置script的src属性
document.body.appendChild(scriptTag); //将script标签添加到body中
//回调函数
var jsonp_callback = function(resultObj){
document.getElementById("box").innerHTML = resultObj.name+":"+resultObj.sex;
}
jsonp.php
$name = $_GET["name"];
$sex = $_GET["sex"];
$callbackname = $_GET["callbackname"]; //回调函数名称
echo "$callbackname({name:'$name',sex:'$sex'})";

Principe d'implémentation : étant donné que l'utilisation de balises de script pour appeler des fichiers js distants n'est pas affectée par le cross-domain, vous pouvez créer une balise de script et accéder au fichier distant via l'attribut src.

En fait, cela n'appartient pas à AJAX, mais il peut réaliser des fonctions de type AJAX.

La troisième méthode XMLHttpRequest Niveau 2 : Le XMLHttpRequest Niveau 2 fourni par HTML5 a implémenté l'accès inter-domaines et quelques autres nouvelles fonctionnalités

Cela nécessite l'ajout du code suivant côté serveur distant

header('Access-Control-Allow-Origin:*'); //*代表可访问的地址，可以设置指定域名
header('Access-Control-Allow-Methods:POST,GET');

De cette façon, utilisez conventionnel les méthodes sur le code AJAX du client suffisent.

Résumé : L'implémentation du proxy est la plus problématique, mais c'est la plus largement utilisée. Tout navigateur prenant en charge AJAX peut utiliser cette méthode.

JSONP est relativement simple, mais ne prend en charge que les appels de méthode GET.

XHR2 est le plus simple, mais il ne prend en charge que HTML5. Si vous développez pour des terminaux mobiles, vous pouvez choisir d'utiliser XHR2.

【Recommandation de didacticiel connexe : Tutoriel vidéo AJAX】

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!