Je développe une page qui extrait des images de Flickr et Panoramio via le support AJAX de jQuery.
Le côté Flickr fonctionne bien, mais lorsque j'essaie de $.get(url, callback)
partir de Panoramio, je vois une erreur dans la console de Chrome:
XMLHttpRequest ne peut pas charger http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150 . L'origine nulle n'est pas autorisée par Access-Control-Allow-Origin.
Si je demande directement cette URL à partir d'un navigateur, cela fonctionne très bien. Que se passe-t-il et puis-je contourner cela? Suis-je en train de composer ma requête de manière incorrecte, ou est-ce quelque chose que Panoramio fait pour entraver ce que j'essaie de faire?
Google n'a trouvé aucune correspondance utile sur le message d'erreur .
ÉDITER
Voici un exemple de code qui montre le problème:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=processImages&minx=-30&miny=0&maxx=0&maxy=150';
$.get(url, function (jsonp) {
var processImages = function (data) {
alert('ok');
};
eval(jsonp);
});
});
Vous pouvez exécuter l'exemple en ligne .
EDIT 2
Merci à Darin pour son aide. LE CODE CI-DESSUS EST MAUVAIS. Utilisez-le à la place:
$().ready(function () {
var url = 'http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&minx=-30&miny=0&maxx=0&maxy=150&callback=?';
$.get(url, function (data) {
// can use 'data' in here...
});
});
la source
iframe
que vousdocument.write
en, par exemple?file:///C:/
). Noniframe
est impliqué.Réponses:
Pour mémoire, pour autant que je sache, vous avez eu deux problèmes:
Vous ne passiez pas de spécificateur de type "jsonp" à votre
$.get
, donc il utilisait un XMLHttpRequest ordinaire. Cependant, votre navigateur a pris en charge CORS (Cross-Origin Resource Sharing) pour autoriser XMLHttpRequest entre domaines si le serveur l'a validé. C'est là que l'en-Access-Control-Allow-Origin
tête est entré.Je crois que vous avez mentionné que vous l'exécutiez à partir d'un fichier: // URL. Il existe deux façons pour les en-têtes CORS de signaler qu'un XHR interdomaine est OK. L'une consiste à envoyer
Access-Control-Allow-Origin: *
(ce qui, si vous atteigniez Flickr via$.get
, ils devaient le faire) tandis que l'autre était de renvoyer le contenu de l'en-Origin
tête. Cependant, lesfile://
URL produisent un nullOrigin
qui ne peut pas être autorisé via écho-back.Le premier a été résolu de manière détournée par la suggestion d'utilisation de Darin
$.getJSON
. Il fait un peu de magie pour changer le type de requête de sa valeur par défaut "json" à "jsonp" s'il voit la sous-chaînecallback=?
dans l'URL.Cela a résolu le second en n'essayant plus d'effectuer une demande CORS à partir d'une
file://
URL.Pour clarifier pour d'autres personnes, voici les instructions de dépannage simples:
$.get
et misdataType
àjsonp
.$.getJSON
et incluscallback=?
dans l'URL.http://
. Les scripts exécutés viafile://
ont une prise en charge limitée de CORS.la source
callback=?
n'a pas fonctionné pour moi, maisjsonp=?
a fonctionné. Une explication à cela?http://
? Ou existe-t-il un moyen d'ouvrir simplement le fichier en utilisant ce protocole?Vous devez peut-être ajouter un HEADER dans votre script appelé, voici ce que j'avais à faire en PHP:
Plus de détails dans Cross domain AJAX ou services WEB .
la source
Pour un projet HTML simple:
Parcourez ensuite votre fichier.
la source
POST
demandes que vous obtenez:code 501, message Unsupported method ('POST')
pour les googles.Fonctionne pour moi sur Google Chrome v5.0.375.127 (je reçois l'alerte):
Je vous recommande également d'utiliser la
$.getJSON()
méthode à la place car la précédente ne fonctionne pas sur IE8 (au moins sur ma machine):Vous pouvez l'essayer en ligne d'ici .
MISE À JOUR:
Maintenant que vous avez montré votre code, je peux voir le problème. Vous disposez à la fois d'une fonction anonyme et d'une fonction en ligne, mais les deux seront appelés
processImages
. Voilà comment fonctionne le support JSONP de jQuery. Remarquez comment je définis lecallback=?
afin que vous puissiez utiliser une fonction anonyme. Vous pouvez en savoir plus à ce sujet dans la documentation .Une autre remarque est que vous ne devez pas appeler eval. Le paramètre transmis à votre fonction anonyme sera déjà analysé en JSON par jQuery.
la source
?
le JSON renvoyé est entouré de parenthèses. Vous ne définissez pas de paramètre pour votre fonction de rappel, et la valeur dethis
ne semble pas avoir d'objet de réponse (au moins, la.data
valeur estnull
).callback=?
indique à jQuery de générer un nom de fonction aléatoire en interne, ce qui entraîne un appel à la fonction anonyme vers laquelle vous passez.getJSON
. J'ai apprécié.Tant que le serveur demandé prend en charge le format de données JSON, utilisez l'interface JSONP (JSON Padding). Il vous permet de faire des demandes de domaine externes sans serveurs proxy ni trucs d'en-tête fantaisistes.
la source
C'est la même politique d'origine , vous devez utiliser une interface JSON-P ou un proxy s'exécutant sur le même hôte.
la source
Nous l'avons géré via le
http.conf
fichier (édité puis redémarré le service HTTP):Dans le
Header set Access-Control-Allow-Origin "*"
, vous pouvez mettre une URL précise.la source
Si vous effectuez des tests locaux ou appelez le fichier à partir de quelque chose comme cela,
file://
vous devez désactiver la sécurité du navigateur.Sur MAC:
open -a Google\ Chrome --args --disable-web-security
la source
Dans mon cas, le même code a bien fonctionné sur Firefox, mais pas sur Google Chrome. La console JavaScript de Google Chrome a déclaré:
J'ai dû supprimer la partie www de l'URL Ajax pour qu'elle corresponde correctement à l'URL d'origine et cela a bien fonctionné ensuite.
la source
Tous les serveurs ne prennent pas en charge jsonp. Il nécessite que le serveur définisse la fonction de rappel dans ses résultats. J'utilise ceci pour obtenir des réponses json de sites qui renvoient du json pur mais ne prennent pas en charge jsonp:
la source
J'utilise le serveur Apache, j'ai donc utilisé le module mod_proxy. Activer les modules:
Puis ajouter:
Enfin, passez proxy-url à votre script.
la source
Comme note finale, la documentation de Mozilla dit explicitement que
En conséquence, ce n'est pas simplement une mauvaise pratique d'utiliser '*'. Ne fonctionne tout simplement pas :)
la source
Pour PHP - ce travail pour moi sur Chrome, Safari et Firefox
https://w3c.github.io/webappsec-cors-for-developers/#avoid-returning-access-control-allow-origin-null
en utilisant axios call php live services avec file: //
la source
header('Access-Control-Allow-Origin: '.( trim($_SERVER['HTTP_REFERER'],'/') ?:'null'),true);
cela permet également l'origine croisée d'un serveur distant à un autre et tombe à (chaîne) null pour le fichier local.J'ai également eu la même erreur dans Chrome (je n'ai pas testé d'autres browers). C'était dû au fait que je naviguais sur domain.com au lieu de www.domain.com. Un peu étrange, mais j'ai pu résoudre le problème en ajoutant les lignes suivantes à .htaccess. Il redirige domain.com vers www.domain.com et le problème a été résolu. Je suis un visiteur Web paresseux, donc je ne tape presque jamais le www mais apparemment, dans certains cas, il est requis.
la source
Assurez-vous que vous utilisez la dernière version de JQuery. Nous étions confrontés à cette erreur pour JQuery 1.10.2 et l'erreur a été résolue après avoir utilisé JQuery 1.11.1
la source
Gens,
J'ai rencontré un problème similaire. Mais en utilisant Fiddler, j'ai pu résoudre le problème. Le problème est que l'URL du client configurée dans l'implémentation CORS du côté de l'API Web ne doit pas avoir de barre oblique de fin. Après avoir soumis votre demande via Google Chrome et inspecté l' onglet TextView de la section En- têtes de Fiddler, le message d'erreur indique quelque chose comme ceci:
* "L'origine de la politique spécifiée your_client_url: / 'n'est pas valide. Elle ne peut pas se terminer par une barre oblique."
C'est vraiment original, car cela a fonctionné sans aucun problème sur Internet Explorer, mais cela m'a donné mal à la tête lors des tests avec Google Chrome.
J'ai supprimé la barre oblique dans le code CORS et recompilé l'API Web, et maintenant l'API est accessible via Chrome et Internet Explorer sans aucun problème. Veuillez essayer.
Merci, Andy
la source
Il y a un petit problème dans la solution publiée par CodeGroover ci - dessus , où si vous changez un fichier, vous devrez redémarrer le serveur pour utiliser réellement le fichier mis à jour (au moins, dans mon cas).
Donc en cherchant un peu, j'ai trouvé celui-ci A utiliser:
Et puis il servira à
http://localhost:8000
.la source