Pourquoi est-ce que j'obtiens « Origin null n'est pas autorisé par Access-Control-Allow-Origin » lors de la récupération d'images via AJAX à partir d'une URL file:// ?

Erreur : "Origin null n'est pas autorisé par Access-Control-Allow-Origin" lors de la demande à partir de l'URL du fichier://

Dans tente de récupérer des images de Panoramio via AJAX, une erreur récurrente se produit dans Chrome : "XMLHttpRequest ne peut pas charger [URL de l'API Panoramio]. Origin null n'est pas autorisé par Access-Control-Allow-Origin." Cette erreur provient des problèmes sous-jacents suivants :

1. Type de demande mal configuré :
   Le code initial n'a pas spécifié le type de demande comme JSONP. Par la suite, jQuery a utilisé XMLHttpRequest, qui s'appuie sur le partage de ressources cross-origine (CORS) pour les requêtes inter-domaines. Cependant, les navigateurs ne prennent en charge CORS qu'avec l'autorisation du serveur via l'en-tête Access-Control-Allow-Origin.
2. Origine nulle à partir du fichier:// URL :
   Comme le code a été exécuté à partir de une URL file://, un en-tête Origin nul a été généré. Cette origine nulle ne peut pas être renvoyée par le serveur, ce qui entraîne un échec d'autorisation.

Solution :

Pour résoudre ces problèmes, apportez les corrections suivantes :

1. Utilisez $.getJSON avec callback=?:
   Au lieu de $.get, utilisez $.getJSON et ajoutez callback=? à l'URL de la demande. Cela signale à jQuery d'utiliser JSONP, qui définit automatiquement le type de requête sur "jsonp".
2. Assurez-vous du protocole HTTP :
   Assurez-vous que le code est exécuté à partir d'une URL HTTP (http : //) au lieu de fichier://. Cela permet à CORS de fonctionner correctement.

Code révisé :

$.getJSON('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=?', function (data) {
  // Process data
});

Conseils de dépannage :

• Assurez-vous de la syntaxe JSONP (par exemple, l'URL contient un rappel =?) pour $.get requêtes.
• Utilisez les URL HTTP pour les requêtes XMLHttpRequest d'origine croisée.
• Vérifiez la prise en charge du navigateur pour CORS (par exemple, Opera et Internet Explorer peuvent ne pas le prendre entièrement en charge).

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!