javascript - resource - jQuery xml error ''No'' El encabezado Access-Control-Allow-Origin ''está presente en el recurso solicitado.''

javascript no access control allow origin header is present on the requested resource

Question

Estoy trabajando en este proyecto personal solo por diversión, donde quiero leer un archivo xml que se encuentra en http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml y analizar el xml y Úselo para convertir valores entre las monedas.

Hasta ahora he encontrado el siguiente código, que es bastante básico para leer el xml, pero aparece el siguiente error.

XMLHttpRequest no puede cargar ****. Ningún encabezado ''Access-Control-Allow-Origin'' está presente en el recurso solicitado. El origen '' http://run.jsbin.com '' no está, por lo tanto, permitido.

$(document).ready( 
    function() {     
        $.ajax({          
            type:  ''GET'',
            url:   ''http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml'',
            dataType: ''xml'',              
            success: function(xml){
                alert(''aaa'');
            }
         });
    }
);

No veo nada mal con mi código, así que espero que alguien pueda señalar lo que estoy haciendo mal con mi código y cómo podría solucionarlo.

Answer 1

Hay una especie de truco tastic manera de hacerlo si tiene php habilitado en su servidor. Cambiar esta línea:

url:   ''http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml'',

a esta línea:

url: ''/path/to/phpscript.php'',

y luego en el script php (si tiene permiso para usar la función file_get_contents ()):

<?php

header(''Content-type: application/xml'');
echo file_get_contents("http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml");

?>

A Php no parece importarle si esa url es de un origen diferente. Como dije, esta es una respuesta hacky, y estoy seguro de que hay algo mal con eso, pero funciona para mí.

Editar: si quiere almacenar en caché el resultado en php, aquí está el archivo php que usaría:

<?php

$cacheName = ''somefile.xml.cache'';
// generate the cache version if it doesn''t exist or it''s too old!
$ageInSeconds = 3600; // one hour
if(!file_exists($cacheName) || filemtime($cacheName) > time() + $ageInSeconds) {
  $contents = file_get_contents(''http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml'');
  file_put_contents($cacheName, $contents);
}

$xml = simplexml_load_file($cacheName);

header(''Content-type: application/xml'');
echo $xml;

?>

Código de almacenamiento en caché tomar desde here .

Answer 2

No podrá realizar una llamada ajax a http://www.ecb.europa.eu/stats/eurofxref/eurofxref-daily.xml desde un archivo implementado en http://run.jsbin.com debido a la política del mismo origen .

Dado que la página de origen (también conocido como origen ) y la URL de destino se encuentran en dominios diferentes ( run.jsbin.com y www.ecb.europa.eu ), su código realmente está intentando realizar una solicitud de CORS , no una GET ordinario.

En pocas palabras, la política del mismo origen dice que los navegadores solo deberían permitir llamadas ajax a servicios en el mismo dominio de la página HTML.

Ejemplo:

Una página en http://www.example.com/myPage.html solo puede solicitar servicios directamente en http://www.example.com , como http://www.example.com/api/myService . Si el servicio está alojado en otro dominio (por ejemplo, http://www.ok.com/api/myService ), el navegador no realizará la llamada directamente (como era de esperar). En cambio, intentará hacer una solicitud CORS.

Para decirlo brevemente, para realizar una solicitud (CORS) * en diferentes dominios, su navegador:

• Incluirá un encabezado de Origin en la solicitud original (con el dominio de la página como valor) y lo realizará de la forma habitual; y entonces
• Solo si la respuesta del servidor a esa solicitud contiene los encabezados adecuados ( Access-Control-Allow-Origin es uno de ellos ) que permite la solicitud CORS, la búsqueda completará la llamada (casi ** exactamente como lo haría si la página HTML fuera en el mismo dominio).
  • Si los encabezados esperados no aparecen, el navegador simplemente se da por vencido (como lo hizo con usted).

_{* Lo anterior muestra los pasos en una solicitud simple , como un GET regular sin encabezados elegantes. Si la solicitud no es simple (como una POST con application/json como tipo de contenido), el navegador la retendrá un momento y, antes de cumplirla, enviará primero una solicitud OPTIONS a la URL objetivo. Al igual que arriba, solo continuará si la respuesta a esta solicitud de OPTIONS contiene los encabezados CORS. Esta llamada OPTIONS se conoce como solicitud de verificación previa.
** Digo casi porque hay otras diferencias entre llamadas regulares y llamadas CORS. Una importante es que algunos encabezados, incluso si están presentes en la respuesta, no serán recogidos por el navegador si no están incluidos en el Access-Control-Expose-Headers .}

¿Como arreglarlo?

¿Fue solo un error tipográfico? A veces, el código JavaScript solo tiene un error tipográfico en el dominio de destino. ¿Te fijaste? Si la página está en www.example.com , ¡solo realizará llamadas regulares a www.example.com ! ¡Otras URL, como api.example.com o incluso example.com o www.example.com:8080 son consideradas por el navegador como dominios diferentes ! Sí, si el puerto es diferente, ¡es un dominio diferente!

Agrega los encabezados. La forma más sencilla de habilitar CORS es agregar los encabezados necesarios (como Access-Control-Allow-Origin ) a las respuestas del servidor. (Cada servidor / idioma tiene una forma de hacerlo, verifique algunas soluciones aquí ).

Último recurso: si no tiene acceso al servicio en el servidor, también puede duplicarlo (a través de herramientas como los proxies inversos ) e incluir todos los encabezados necesarios allí.