Question Erreur XmlHttpRequest: l'origine null n'est pas autorisée par Access-Control-Allow-Origin


Je développe une page qui tire des images de Flickr et Panoramio via le support AJAX de jQuery.

Le côté Flickr fonctionne bien, mais quand 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 j'interroge directement cette URL à partir d'un navigateur, cela fonctionne correctement. Qu'est-ce qui se passe, et puis-je contourner cela? Est-ce que je compose mal ma requête, ou est-ce quelque chose que Panoramio fait pour empêcher ce que j'essaie de faire?

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

MODIFIER

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 lancez l'exemple en ligne.

EDIT 2

Merci à Darin pour son aide avec ça. LE CODE CI-DESSUS EST ERRONÉ.  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...
  });
});

506
2017-08-29 16:12


origine


Réponses:


Pour mémoire, pour autant que je sache, vous avez eu deux problèmes:

  1. Vous ne passiez pas un spécificateur de type "jsonp" à votre $.get, il utilisait donc un XMLHttpRequest ordinaire. Toutefois, votre navigateur a pris en charge CORS (Partage de ressources d'origine croisée) pour autoriser XMLHttpRequest interdomaines si le serveur l'a autorisé. C'est là que le Access-Control-Allow-Origin en-tête est entré

  2. Je crois que vous avez mentionné que vous l'exécutiez depuis un fichier: // URL. Il existe deux façons pour les en-têtes CORS de signaler qu'un XHR interdomaine est OK. On doit envoyer Access-Control-Allow-Origin: * (qui, si vous atteigniez Flickr via $.get, ils doivent avoir fait) tandis que l'autre était de faire écho le contenu de la Origin entête. cependant, file:// Les URL produisent un null Origin qui ne peut pas être autorisé via écho-retour.

Le premier a été résolu d'une manière détournée par la suggestion de Darin d'utiliser $.getJSON. Il est un peu magique de changer le type de requête par défaut de "json" en "jsonp" s'il voit la sous-chaîne callback=? dans l'URL.

Cela a résolu le second en n'essayant plus d'effectuer une demande CORS à partir d'un file:// URL

Pour clarifier pour d'autres personnes, voici les instructions de dépannage simples:

  1. Si vous essayez d'utiliser JSONP, assurez-vous que l'un des cas suivants est le cas:
    • Vous utilisez $.get Et mettre dataType à jsonp.
    • Vous utilisez $.getJSON et inclus callback=? dans l'URL.
  2. Si vous essayez de faire un XMLHttpRequest inter-domaine via CORS ...
    1. Assurez-vous de tester via http://. Scripts exécutés via file:// avoir un soutien limité pour CORS.
    2. Assurez-vous que le navigateur prend en charge CORS. (Opera et Internet Explorer sont en retard à la fête)

409
2017-09-19 06:06



Vous devez peut-être ajouter un en-tête dans votre script appelé, 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).


73
2018-02-11 10:59



Pour un projet HTML simple:

cd project
python -m SimpleHTTPServer 8000

Puis parcourez votre fichier.


66
2018-03-07 15:49



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);
});

Aussi je vous recommande d'utiliser le $.getJSON() méthode à la place que le précédent ne fonctionne pas sur IE8 (au 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.


METTRE À JOUR:

Maintenant que vous avez montré votre code, je peux voir le problème. Vous avez à la fois une fonction anonyme et une fonction inline mais les deux seront appelées processImages. C'est ainsi que fonctionne le support JSON de jQuery. Remarquez comment je définis la callback=? afin que vous puissiez utiliser une fonction anonyme. Vous pouvez lire plus à 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é dans JSON par jQuery.


19
2017-08-29 16:14



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 requêtes de domaine externes sans serveurs proxy ou en-têtes de fantaisie.


8
2018-05-06 16:27



Nous l'avons géré via le http.conf fichier (édité puis redémarré le service HTTP):

<Directory "/home/the directory_where_your_serverside_pages_is">
    Header set Access-Control-Allow-Origin "*"
    AllowOverride all
    Order allow,deny
    Allow from all
</Directory>

dans le Header set Access-Control-Allow-Origin "*", vous pouvez mettre une URL précise.


5
2017-07-29 18:58



C'est le même politique d'origine, vous devez utiliser une interface JSON-P ou un proxy s'exécutant sur le même hôte.


4
2017-08-29 16:15



Si vous faites des tests locaux ou appelez le fichier à partir de quelque chose comme file:// alors vous devez désactiver la sécurité du navigateur.

Sur MAC: open -a Google\ Chrome --args --disable-web-security


4
2017-08-20 18:35



Dans mon cas, le même code fonctionnait bien sur Firefox, mais pas sur Google Chrome. La console JavaScript de Google Chrome a déclaré:

XMLHttpRequest cannot load http://www.xyz.com/getZipInfo.php?zip=11234. 
Origin http://xyz.com is not allowed by Access-Control-Allow-Origin.
Refused to get unsafe header "X-JSON"

J'ai dû laisser tomber la partie www de l'URL Ajax pour qu'elle corresponde correctement à l'URL d'origine et cela a bien fonctionné.


3
2018-01-03 19:09