No podrá realizar una llamada ajax 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 .
Como la página de origen (también conocida como origen ) y la URL de destino se encuentran en dominios diferentes ( run.jsbin.com
y www.ecb.europa.eu
), su código en realidad está intentando realizar una solicitud entre dominios (CORS) , no una solicitud ordinaria GET
.
En pocas palabras, la política del mismo origen dice que los navegadores solo deben 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 directamente servicios que están en http://www.example.com
, como http://www.example.com/api/myService
. Si el servicio está alojado en otro dominio (digamos http://www.ok.com/api/myService
), el navegador no realizará la llamada directamente (como era de esperar). En su lugar, intentará realizar una solicitud CORS.
En pocas palabras, para realizar una solicitud (CORS) * en diferentes dominios, su navegador:
- Incluirá un
Origin
encabezado en la solicitud original (con el dominio de la página como valor) y lo realizará como de costumbre; y entonces
- Solo si la respuesta del servidor a esa solicitud contiene los encabezados adecuados (
Access-Control-Allow-Origin
es uno de ellos ) que permiten la solicitud CORS, el navegador completará la llamada (casi ** exactamente como lo haría si la página HTML estuviera en el mismo dominio).
- Si los encabezados esperados no vienen, el navegador simplemente se rinde (como lo hizo contigo).
* Lo anterior describe los pasos en una solicitud simple , como una regular GET
sin encabezados elegantes. Si la solicitud no es simple (como POST
con un application/json
tipo de contenido), el navegador la detendrá un momento y, antes de completarla, enviará primero una OPTIONS
solicitud a la URL de destino. Como anteriormente, solo continuará si la respuesta a esta OPTIONS
solicitud contiene los encabezados CORS. Esta OPTIONS
llamada se conoce como solicitud de verificación previa.
** Digo casi porque hay otras diferencias entre las llamadas regulares y las llamadas CORS. Uno 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 elAccess-Control-Expose-Headers
encabezado.
¿Como arreglarlo?
¿Fue solo un error tipográfico? A veces, el código JavaScript tiene un error tipográfico en el dominio de destino. ¿Te fijaste? Si la página está en www.example.com
, solo hará llamadas regulares a www.example.com
! Otras URL, como api.example.com
o incluso example.com
o www.example.com:8080
son consideradas dominios diferentes por el navegador. Sí, si el puerto es diferente, entonces es un dominio diferente.
Agrega los encabezados. La forma más sencilla de habilitar CORS es agregando los encabezados necesarios (como Access-Control-Allow-Origin
) a las respuestas del servidor. (Cada servidor / idioma tiene una forma de hacerlo; consulte algunas soluciones aquí ).
Último recurso: si no tiene acceso del lado del servidor al servicio, también puede duplicarlo (a través de herramientas como proxies inversos ) e incluir todos los encabezados necesarios allí.