Comment puis-je résoudre les requêtes AJAX inter-domaines lors du chargement d'un point de terminaison HTML ?

Chargement d'un point de terminaison inter-domaines avec AJAX

Le partage de ressources cross-origine (CORS) est un protocole qui permet aux navigateurs Web d'effectuer des requêtes vers des ressources sur d'autres domaines. Cependant, certaines restrictions sont en place pour empêcher toute utilisation malveillante de cette fonctionnalité.

Problème

Lorsque vous tentez de charger une page HTML inter-domaines à l'aide d'AJAX, vous pouvez rencontrer des problèmes, sauf si le type de données est défini sur "jsonp". Cependant, en utilisant JSONP, le navigateur attend un script de type MIME, mais il reçoit "text/html" à la place. De plus, l'utilisation du paramètre crossDomain n'a pas résolu le problème.

Solution

Il existe plusieurs approches pour surmonter la barrière inter-domaines :

JSONP

JSONP (JSON with Padding) est une technique qui permet d'effectuer des requêtes AJAX inter-domaines en encapsulant la réponse dans un appel de fonction. Ceci peut être réalisé en définissant le paramètre dataType sur "jsonp" et en fournissant une fonction de rappel en tant que gestionnaire de réussite.

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

Proxy CORS

Les proxys CORS sont des serveurs intermédiaires qui peuvent être utilisés pour contourner la politique de même origine. Ils ajoutent les en-têtes nécessaires à la requête pour permettre au navigateur d'accéder aux ressources sur d'autres domaines. Plusieurs services proxy CORS réputés sont disponibles en ligne.

$.ajax({
  type: "GET",
  url: "https://cors-proxy.com/crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

CORS Anywhere

CORS Anywhere est un serveur proxy CORS populaire qui peut être utilisé pour récupérer des ressources de n'importe quel domaine.

$.ajaxPrefilter(function(options) {
  if (options.crossDomain && $.support.cors) {
    options.url = "https://cors-anywhere.herokuapp.com/" + options.url;
  }
});

$.ajax({
  type: "GET",
  url: "crossdomainendpoint.com",
  dataType: "json",
  success: function(data) {
    // Handle the CORS response
  }
});

Whatever Origin

Whatever Origin est une bibliothèque open source qui utilise JSONP pour permettre des échanges inter-domaines demandes.

$.ajax({
  type: "GET",
  url: "http://whateverorigin.org/get?url=" + encodeURIComponent("crossdomainendpoint.com"),
  dataType: "jsonp",
  success: function(data) {
    // Handle the JSONP response
  }
});

Notez que même si ces techniques peuvent aider à surmonter les restrictions inter-domaines, il est important de prendre en compte les implications en matière de sécurité et de respecter les principes de la politique de même origine lorsque vous travaillez avec des ressources externes.

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!