Notes jQuery Ajax
- En raison des restrictions de sécurité du navigateur, la plupart des demandes Ajax sont soumises à la même politique d'origine ; la demande ne parvient pas à récupérer les données d'un autre domaine, sous-domaine, port ou protocole.
- Les requêtes de script et JSONP ne sont pas soumises aux mêmes restrictions de politique d'origine.
Il y a des façons de surmonter la interdomaine barrière:
Il existe des plugins qui aident avec les requêtes inter-domaines :
La tête haute!
La meilleure façon de surmonter ce problème est de créer votre propre proxy dans le back-end, de sorte que votre proxy pointe vers les services dans d'autres domaines, car dans le back-end n'existe pas la même restriction de politique d'origine . Mais si vous ne pouvez pas faire cela dans le back-end, faites attention aux conseils suivants.
Avertissement!
L'utilisation de proxys tiers n'est pas une pratique sécurisée, car ils peuvent garder une trace de vos données, afin qu'elles puissent être utilisées avec des informations publiques, mais jamais avec des données privées.
Les exemples de code ci-dessous utilisent jQuery.get () et jQuery.getJSON () , les deux sont des méthodes abrégées de jQuery.ajax ()
CORS n'importe où
CORS Anywhere est un proxy node.js qui ajoute des en-têtes CORS à la requête mandatée.
Pour utiliser l'API, préfixez simplement l'URL avec l'URL de l'API. (Prend en charge https : voir le référentiel github )
Si vous souhaitez activer automatiquement les requêtes inter-domaines en cas de besoin, utilisez l'extrait de code suivant:
$.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;
//options.url = "http://cors.corsproxy.io/url=" + options.url;
}
});
$.get(
'http://en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Quelle que soit l'origine
Quelle que soit l'origine est un accès jsonp interdomaine . Ceci est une alternative open source à anyorigin.com .
Pour récupérer les données de google.com, vous pouvez utiliser cet extrait:
// It is good specify the charset you expect.
// You can use the charset you want instead of utf-8.
// See details for scriptCharset and contentType options:
// http://api.jquery.com/jQuery.ajax/#jQuery-ajax-settings
$.ajaxSetup({
scriptCharset: "utf-8", //or "ISO-8859-1"
contentType: "application/json; charset=utf-8"
});
$.getJSON('http://whateverorigin.org/get?url=' +
encodeURIComponent('http://google.com') + '&callback=?',
function (data) {
console.log("> ", data);
//If the expected response is text/plain
$("#viewer").html(data.contents);
//If the expected response is JSON
//var response = $.parseJSON(data.contents);
});
Proxy CORS
CORS Proxy est un simple proxy node.js pour activer la requête CORS pour n'importe quel site Web. Il permet au code javascript sur votre site d'accéder à des ressources sur d'autres domaines qui seraient normalement bloqués en raison de la politique de même origine.
Comment ça marche? CORS Proxy tire parti du partage de ressources cross-origin, qui est une fonctionnalité qui a été ajoutée avec HTML 5. Les serveurs peuvent spécifier qu'ils souhaitent que les navigateurs autorisent d'autres sites Web à demander les ressources qu'ils hébergent. CORS Proxy est simplement un proxy HTTP qui ajoute un en-tête aux réponses disant "n'importe qui peut demander ceci".
C'est une autre façon d'atteindre l'objectif (voir www.corsproxy.com ). Tout ce que vous avez à faire est de déshabiller http: // et www. à partir de l'URL faisant l'objet d'un proxy, et ajoutez l'URL avecwww.corsproxy.com/
$.get(
'http://www.corsproxy.com/' +
'en.wikipedia.org/wiki/Cross-origin_resource_sharing',
function (response) {
console.log("> ", response);
$("#viewer").html(response);
});
Navigateur proxy CORS
Récemment, j'ai trouvé celui-ci, il implique divers utilitaires de partage à distance Cross Origin orientés sécurité. Mais c'est une boîte noire avec Flash comme backend.
Vous pouvez le voir en action ici: Navigateur proxy CORS
Obtenez le code source sur GitHub: koto / cors-proxy-browser