Erreur "Origin null is not allowed by Access-Control-Allow-Origin" pour une demande faite par une application s'exécutant depuis une URL file://.

Question

Je suis en train de développer une page qui tire 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) de Panoramio, je vois une erreur dans la console de Chrome :

XMLHttpRequest ne peut pas être chargé 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 null n'est pas autorisée par Access-Control-Allow-Origin.

Si j'interroge directement cette URL à partir d'un navigateur, tout fonctionne bien. Que se passe-t-il, et comment puis-je contourner ce problème ? Est-ce que je compose ma requête de manière incorrecte, ou est-ce que Panoramio fait quelque chose qui entrave ce que j'essaie de faire ?

Google n'a pas trouvé de correspondance utile sur le message d'erreur .

EDITAR

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 FAUX. Utilisez ceci à 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...
  });
});

Answer 1

Pour le compte rendu, pour autant que je sache, vous aviez deux problèmes :

1. Vous n'avez pas passé un spécificateur de type "jsonp" à votre fichier $.get Il a donc utilisé un XMLHttpRequest ordinaire. Toutefois, votre navigateur prenait en charge la fonction CORS (Cross-Origin Resource Sharing) pour autoriser les requêtes XMLHttpRequest interdomaines si le serveur l'acceptait. C'est là que le Access-Control-Allow-Origin L'en-tête est arrivé.

2. Je crois que vous avez mentionné que vous l'exécutiez à partir d'une URL file://. Il existe deux façons pour les en-têtes CORS de signaler qu'un XHR inter-domaine est OK. La première consiste à envoyer Access-Control-Allow-Origin: * (qui, si vous atteigniez Flickr via $.get ), tandis que l'autre devait renvoyer le contenu de l'adresse de l'utilisateur. Origin tête. Cependant, file:// Les URLs produisent un résultat nul Origin qui ne peut pas être autorisé par le biais de l'écho-back.

La première a été résolue de manière détournée par la suggestion de Darin d'utiliser $.getJSON . Il fait un peu de magie pour changer le type de requête de son défaut de "json" à "jsonp" s'il voit la sous-chaîne callback=? dans l'URL.

Cela a permis de résoudre la seconde en n'essayant plus d'exécuter une requête CORS à partir d'une file:// URL.

Afin de clarifier la situation pour les autres personnes, voici les instructions simples de dépannage :

1. Si vous essayez d'utiliser JSONP, assurez-vous que l'une des conditions suivantes est remplie :
   • Vous utilisez $.get et mettre dataType a jsonp .
   • Vous utilisez $.getJSON et comprend callback=? dans l'URL.
2. Si vous essayez de faire une requête XMLHttp inter-domaine via CORS...
   1. Assurez-vous que vous faites des tests via http:// . scripts en cours d'exécution via file:// ont un support limité pour CORS.
   2. Assurez-vous que le navigateur supporte effectivement CORS . (Opera et Internet Explorer sont en retard pour la fête)

Answer 2

Vous devez peut-être ajouter un HEADER dans votre script, voici ce que j'ai dû faire en PHP :

header('Access-Control-Allow-Origin: *');

Plus de détails dans Cross domain AJAX ou services WEB (en français).

Answer 3

Pour un projet HTML simple :

cd project
python -m SimpleHTTPServer 8000

Ensuite, parcourez votre fichier.

Answer 4

Cela fonctionne pour moi sur Google Chrome v5.0.375.127 (je reçois l'alerte) :

$.get('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150',
function(json) {
    alert(json.photos[1].photoUrl);
});

Je vous recommande également d'utiliser le $.getJSON() car la méthode précédente ne fonctionne pas avec IE8 (du moins sur ma machine) :

$.getJSON('http://www.panoramio.com/wapi/data/get_photos?v=1&key=dummykey&tag=test&offset=0&length=20&callback=?&minx=-30&miny=0&maxx=0&maxy=150', 
function(json) {
    alert(json.photos[1].photoUrl);
});

Vous pouvez l'essayer en ligne à partir d'ici .

---

UPDATE :

Maintenant que vous avez montré votre code, je peux voir le problème qu'il pose. Vous avez à la fois une fonction anonyme et une fonction en ligne mais les deux seront appelées. processImages . C'est ainsi que le support JSONP de jQuery fonctionne. Remarquez comment je définis le callback=? afin de pouvoir utiliser une fonction anonyme. Vous pouvez lire la suite à ce sujet dans la documentation .

Une autre remarque est que vous ne devriez pas appeler eval. Le paramètre passé à votre fonction anonyme sera déjà analysé en JSON par jQuery.

Answer 5

Tant que le serveur demandé prend en charge le format de données JSON, utilisez l'interface JSONP (JSON Padding). Elle vous permet d'effectuer des requêtes de domaine externe sans serveur proxy ni en-tête fantaisiste.