Pourquoi AJAX ne parvient-il pas à charger le HTML inter-domaines à moins que JSONP ne soit utilisé, et comment ce problème peut-il être résolu ?

Chargement du point de terminaison inter-domaines avec AJAX

Problème :

Vous rencontrez des difficultés pour charger une page HTML inter-domaines à l'aide AJAX sauf si le dataType est défini sur « jsonp ». Même lors de l'utilisation de JSONP, le navigateur anticipe un type MIME de script mais reçoit à la place "text/html".

Solution 1 : Utilisation de proxys tiers

Pour des raisons de sécurité En raison des problèmes liés au suivi des données des utilisateurs par des proxys tiers, leur utilisation avec des informations privées est déconseillée. Cependant, ils peuvent convenir aux scénarios de données publiques.

Considérez les options de proxy suivantes :

• CORS Anywhere : Ajoute automatiquement les en-têtes CORS aux requêtes proxy.

$.ajaxPrefilter(function (options) {
  if (options.crossDomain && jQuery.support.cors) {
    var http = (window.location.protocol === 'http:' ? 'http:' : 'https:');
    options.url = http + '//cors-anywhere.herokuapp.com/' + options.url;
  }
});

• Quelle que soit l'origine : Facilite l'accès JSONP inter-domaines.

$.ajaxSetup({
  scriptCharset: "utf-8",
  contentType: "application/json; charset=utf-8"
});

$.getJSON('http://whateverorigin.org/get?url=' +
  encodeURIComponent('http://google.com') + '&callback=?',
  function (data) {
    console.log("> ", data);
    $("#viewer").html(data.contents);
  }
);

• Proxy CORS : Simplifie les requêtes CORS pour n'importe quel site Web.

$.get(
  'http://www.corsproxy.com/' +
  'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
  function (response) {
    console.log("> ", response);
    $("#viewer").html(response);
  }
);

Solution 2 : établir votre backend Proxy

L'approche la plus sécurisée consiste à créer un proxy sur le back-end, résolvant ainsi le problème inter-domaines.

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!