erreur XmlHttpRequest: null origine n'est pas autorisé par Access-Control-Allow-Origin

StackOverflow https://stackoverflow.com/questions/3595515

Question

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

Le côté Flickr fonctionne bien, mais lorsque je tente de $.get(url, callback) 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 . null origine n'est pas autorisé par Access-Control-Allow-Origin.

Si la requête I cette URL à partir d'un navigateur directement, il fonctionne très bien. Qu'est-ce qui se passe, et puis-je contourner cela? Suis-je composais incorrectement ma requête, ou est-ce quelque chose qui fait pour empêcher panoramio ce que je suis en train de faire?

Google ne se est pas des résultats utiles sur la message d'erreur .

EDIT

Voici quelques exemples de code qui SHOWS 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 à cet égard. CI-DESSUS EST MAL CODE Utilisez ceci:. 

$().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...
  });
});
Était-ce utile?

La solution

Pour l'enregistrement, pour autant que je peux dire, vous avez eu deux problèmes:

  1. Vous ne transmettaient pas un spécificateur de type « jsonp » à votre $.get, il utilisait un XMLHttpRequest ordinaire. Cependant, votre navigateur CORS pris en charge (Partage des ressources Cross-origin) pour permettre XMLHttpRequest inter-domaines si le serveur OKed il. C'est là l'en-tête de Access-Control-Allow-Origin entra.

  2. Je crois que vous l'avez mentionné que vous exécutez à partir d'un fichier: // URL. Il y a deux façons pour les en-têtes CORS pour signaler qu'un XHR interdomaines est OK. La première consiste à envoyer Access-Control-Allow-Origin: * (qui, si vous atteignez Flickr via $.get, ils doivent avoir été en train de faire) alors que l'autre était de retour d'écho le contenu de l'en-tête de Origin. Cependant, les URL de file:// produisent un Origin nul qui ne peut être autorisée par l'intermédiaire d'écho de retour.

Le premier a été résolu d'une manière détournée par la suggestion de Darin à l'utilisation $.getJSON. Il fait un peu de magie pour changer le type de demande de sa valeur par défaut de « JSON » à « jsonp » si elle voit le callback=? substring dans l'URL.

qui a résolu le second par ne plus essayer d'effectuer une demande CORS à partir d'une URL de file://.

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

  1. Si vous essayez d'utiliser JSONP, assurez-vous une des options suivantes est le cas:
    • Vous utilisez $.get et ensemble dataType jsonp.
    • Vous utilisez $.getJSON et callback=? inclus dans l'URL.
  2. Si vous essayez de faire un XMLHttpRequest inter-domaines via CORS ...
    1. Assurez-vous que vous testez via http://. Les scripts en cours d'exécution par l'intermédiaire file:// ont un support limité pour CORS.
    2. Assurez-vous que le navigateur soutient en fait CORS . (Opera et Internet Explorer sont en retard à la fête)

Autres conseils

Vous devez peut-être ajouter une tête dans votre script appelé, voici ce que je devais faire en PHP: 

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

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

Pour un simple projet HTML: 

cd project
python -m SimpleHTTPServer 8000

Ensuite, parcourez le fichier.

Travaux 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 la méthode $.getJSON() au lieu 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 essayer en ligne d'ici .

Mise à jour:

Maintenant que vous avez montré votre code, je peux voir le problème. Vous ayant à la fois une fonction anonyme et la fonction en ligne, mais les deux seront appelés processImages. Voilà comment fonctionne de soutien JSONP de jQuery. Remarquez comment je le callback=? afin la définition que vous pouvez utiliser une fonction anonyme. Vous pouvez en savoir 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ée en JSON par jQuery.

Tant que le serveur prend en charge le format demandé des données JSON, utilisez l'interface JSONP JSON (padding). Il vous permet de faire des demandes de domaine externes sans serveurs proxy ou des choses d'en-tête de fantaisie.

Nous avons réussi via le fichier http.conf (modifié 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.

Si vous faites des tests en local ou en appelant le fichier de quelque chose comme file:// alors vous devez désactiver la sécurité du navigateur.

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

Dans mon cas, même code fonctionne bien sur Firefox, mais pas sur Google Chrome. console JavaScript de Google Chrome a dit: 

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"

Je devais abandonner la partie www de l'URL Ajax pour qu'il correspondre correctement avec l'URL d'origine et il a bien fonctionné alors.

Tous les serveurs prennent en charge jsonp. Il exige que le serveur pour définir la fonction de rappel dans les résultats de it. J'utiliser pour obtenir des réponses JSON à partir de sites qui renvoient JSON pure, mais ne prennent pas en charge jsonp: 

function AjaxFeed(){

    return $.ajax({
        url:            'http://somesite.com/somejsonfile.php',
        data:           {something: true},
        dataType:       'jsonp',

        /* Very important */
        contentType:    'application/json',
    });
}

function GetData() {
    AjaxFeed()

    /* Everything worked okay. Hooray */
    .done(function(data){
        return data;
    })

    /* Okay jQuery is stupid manually fix things */
    .fail(function(jqXHR) {

        /* Build HTML and update */
        var data = jQuery.parseJSON(jqXHR.responseText);

        return data;
    });
}

J'utilise le serveur Apache, donc je l'ai utilisé le module mod_proxy. Activer modules: 

LoadModule proxy_module modules/mod_proxy.so
LoadModule proxy_http_module modules/mod_proxy_http.so

Puis ajouter: 

ProxyPass /your-proxy-url/ http://service-url:serviceport/

Enfin, passez proxy URL pour votre script.

Comme note finale la documentation Mozilla dit explicitement

  

L'exemple ci-dessus échouerait si l'en-tête était comme caractère générique:    Accès-Control-Allow-origine:. * Depuis le Access-Control-Allow-Origin mentionne explicitement http: / /foo.example ,   le contenu conscient des titres de compétences est retourné sur le Web invocateur   contenu.

Comme conséquence est non seulement une mauvaise pratique à utiliser « * ». ne fonctionne tout simplement pas:)

J'ai aussi eu la même erreur dans Chrome (je n'ai pas testé d'autres navigateurs). Il était dû au fait que je naviguais sur domain.com au lieu de www.domain.com. Un peu étrange, mais je ne pouvais résoudre le problème en ajoutant les lignes suivantes pour .htaccess. Il réoriente domain.com à www.domain.com et le problème a été résolu. Je suis un visiteur Web paresseux donc je tape presque jamais le www, mais apparemment, dans certains cas, il est nécessaire. 

RewriteEngine on
RewriteCond %{HTTP_HOST} ^domain\.com$ [NC]
RewriteRule ^(.*)$ http://www.domain.com/$1 [R=301,L]

Assurez-vous que vous utilisez la dernière version de JQuery. Nous étions face à cette erreur pour JQuery 1.10.2 et l'erreur après avoir utilisé décidâmes sommes JQuery 1.11.1

Folks,

je suis tombé sur un problème similaire. Mais en utilisant Fiddler, je suis en mesure d'obtenir à la question. Le problème est que l'URL du client qui est configuré dans la mise en œuvre CORS du côté de l'API Web ne doit pas avoir un avant-slash. Après avoir soumis votre demande via Google Chrome et inspectez le TextView de 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:.. / » Est invalide Il ne peut pas se terminer par une barre oblique"

Ceci est vrai bizarre parce qu'il a travaillé sans aucun problème sur Internet Explorer, mais m'a donné un mal de tête lors du test en utilisant Google Chrome.

Je retire 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. S'il vous plaît donner ce coup.

Merci, Andy

Il y a un petit problème dans la solution affichée par CodeGroover ci-dessus , où si vous modifiez un fichier, vous aurez doivent redémarrer le serveur pour utiliser réellement le fichier mis à jour (au moins, dans mon cas).

recherche donc un peu, j'ai trouvé celui-ci Pour utiliser: 

sudo npm -g install simple-http-server # to install
nserver # to use

Et puis il servira à http://localhost:8000.

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 

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

en utilisant les services d'appels en direct php avec Axios file: //

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top