Je travaille sur ce projet personnel juste pour le plaisir où je veux lire un fichier xml qui se trouve à http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml et analyser le xml et utilisez-le pour convertir les valeurs entre les devises.
Jusqu'à présent, j'ai trouvé le code ci-dessous qui est assez basique pour lire le xml, mais j'obtiens l'erreur suivante.
XMLHttpRequest ne peut pas charger ****. Aucun en-tête «Access-Control-Allow-Origin» n'est présent sur la ressource demandée. L' accès à l' origine ' http://run.jsbin.com ' n'est donc pas autorisé.
$(document).ready(
function() {
$.ajax({
type: 'GET',
url: 'http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml',
dataType: 'xml',
success: function(xml){
alert('aaa');
}
});
}
);
Je ne vois rien de mal avec mon code, donc j'espère que quelqu'un pourra signaler ce que je fais de mal avec mon code et comment je pourrais le réparer.
javascript
jquery
ajax
xml-parsing
cors
Bazinga777
la source
la source
Réponses:
Vous ne pourrez pas passer un appel ajax à
http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml
partir d'un fichier déployé à enhttp://run.jsbin.com
raison de la politique de même origine .Comme la page source (aka origine ) et l' URL cible se trouvent dans des domaines différents (
run.jsbin.com
etwww.ecb.europa.eu
), votre code tente en fait de faire une requête interdomaine (CORS) , pas une requête ordinaireGET
.En quelques mots, la politique de même origine stipule que les navigateurs ne doivent autoriser que les appels ajax aux services du même domaine de la page HTML.
Exemple:
Une page sur
http://www.example.com/myPage.html
peut uniquement demander directement les services qui sont àhttp://www.example.com
, commehttp://www.example.com/api/myService
. Si le service est hébergé sur un autre domaine (par exemplehttp://www.ok.com/api/myService
), le navigateur n'effectuera pas l'appel directement (comme vous vous en doutez). Au lieu de cela, il essaiera de faire une requête CORS.En bref, pour effectuer une requête (CORS) * sur différents domaines, votre navigateur:
Origin
tête dans la demande d'origine (avec le domaine de la page comme valeur) et l'exécutera comme d'habitude; puisAccess-Control-Allow-Origin
est l' un d'entre eux ) permettant la requête CORS, la navigation terminera l'appel (presque ** exactement comme il le ferait si la page HTML était dans le même domaine).* Ce qui précède décrit les étapes dans une requête simple , comme une requête régulière
GET
sans en-têtes sophistiqués. Si la demande n'est pas simple (comme unPOST
avecapplication/json
comme type de contenu), le navigateur la retiendra un moment et, avant de la remplir, enverra d'abord uneOPTIONS
demande à l'URL cible. Comme ci-dessus, il ne continuera que si la réponse à cetteOPTIONS
requête contient les en-têtes CORS. CetOPTIONS
appel est appelé demande de contrôle en amont .** Je dis presque parce qu'il existe d'autres différences entre les appels réguliers et les appels CORS. Un point important est que certains en-têtes, même s'ils sont présents dans la réponse, ne
Access-Control-Expose-Headers
seront pas récupérés par le navigateur s'ils ne sont pas inclus dans l'en- tête.Comment le réparer?
Était-ce juste une faute de frappe? Parfois, le code JavaScript n'a qu'une faute de frappe dans le domaine cible. Avez-vous vérifié? Si la page est à,
www.example.com
il ne fera que des appels réguliers àwww.example.com
! D'autres URL, telles queapi.example.com
ou mêmeexample.com
ouwww.example.com:8080
sont considérées comme des domaines différents par le navigateur! Oui, si le port est différent, alors c'est un domaine différent!Ajoutez les en-têtes. Le moyen le plus simple d' activer CORS consiste à ajouter les en-têtes nécessaires (as
Access-Control-Allow-Origin
) aux réponses du serveur. (Chaque serveur / langue a un moyen de le faire - vérifiez quelques solutions ici .)Dernier recours: si vous ne disposez pas d'un accès côté serveur au service, vous pouvez également le mettre en miroir (via des outils tels que des proxys inverses ) et y inclure tous les en-têtes nécessaires.
la source
Access-Control-Allow-Origin
dans cette URL les en-têtes n'auront aucune importance - le navigateur ouvrira l'URL comme d'habitude. La politique de même origine (et l'exigence de l'en-Access-Control-Allow-Origin
tête) ne s'applique qu'aux appels Ajax.Il existe une sorte de moyen hack-tastic de le faire si php est activé sur votre serveur. Changez cette ligne:
à cette ligne:
puis dans le script php (si vous avez l'autorisation d'utiliser la fonction file_get_contents ()):
Php ne semble pas déranger si cette URL est d'origine différente. Comme je l'ai dit, c'est une réponse hacky, et je suis sûr qu'il y a quelque chose qui ne va pas, mais cela fonctionne pour moi.
Edit: Si vous souhaitez mettre en cache le résultat en php, voici le fichier php que vous utiliseriez:
Le code de mise en cache prend ici .
la source
file_get_contents
appel que si le fichier XML le plus récent est suffisamment daté. N'oubliez pas non plus votre en-tête Content-Type :-)