Estoy haciendo un progrma que recoge el valor de las divisas desde el servidor http://freecurrencyrates.com
Al ejecutar directamente la URL: http://freecurrencyrates.com/api/action.php?s=cbr&do=cvals&v=1&f=eur&iso=usd
Me sale en el depurador de errores de Firefox;
{"updated":"1595930761","USD":1.1715999532811638}
pero al ejecutar el fichero divisas.php me da el error:
falta la cabecera CORS 'Access-Control-Allow-Origin'
Y no se como solucionarlo, he leido que añadiendo el codigo siguiente da accesso a todos los servidores externos con * o bien al servidor externo indicado pero nada.
<?php
header ('Access-Control-Allow-Origin: *'); // http://freecurrencyrates.com
?>
// divisas.php fichero situado y ejecutado desde localhost
<?php
header ('Access-Control-Allow-Origin: *'); // http://freecurrencyrates.com
?>
<!DOCTYPE html>
<html>
<head>
<meta charset = "UTF-8">
<script>
function getdetails ()
{ var ajax_request = new XMLHttpRequest ();
ajax_request.withCredentials = true;
var url = "http://freecurrencyrates.com/api/action.php?s=cbr&do=cvals&v=1&f=eur&iso=usd";
ajax_request.open ("GET", url);
var request = new XMLHttpRequest();
// Definimos una función a ejecutar cuándo la solicitud Ajax tiene alguna información
ajax_request.onreadystatechange = function ()
{ if (ajax_request.readyState == 4)
{ // Analizo el responseText que contendrá el JSON enviado desde el servidor
var response = JSON.parse (ajax_request.responseText);
var html = "actualización: " + response.updated + "<br />"
+ "1 € son: " + response.USD + " USD";
document.getElementById ("destino").innerHTML = html;
}
}
// Enviamos la solictud con los parámetros que habíamos definido
ajax_request.send ();
};
</script>
</head>
<body>
<button onclick = 'getdetails ();'>Obtener los datos</button>
<div id = "destino"></div>
</body>
</html>
La cabecera CORS (Access-Control-Allow-Origin) la tiene que enviar el servidor al que llamas, en este caso freecurrencyrates.com, no algo que puedas añadir tú desde tu JavaScript. Por eso funciona al pegar la URL directamente en el navegador (esa petición no pasa por CORS, es navegación normal) pero falla al llamarla desde tu página vía AJAX: el navegador bloquea la respuesta porque el servidor remoto no incluye esa cabecera autorizando tu dominio.
Si no controlas ese servidor externo (que es tu caso), no puedes «arreglarlo» desde el cliente. La solución estándar es montar un proxy en tu propio servidor: tu PHP hace la petición al API externo por el lado del servidor (donde CORS no aplica, es una petición servidor-a-servidor), y tu JavaScript llama a tu propio endpoint PHP, que sí está en tu mismo origen:
// proxy.php
<?php
$url = "http://freecurrencyrates.com/api/action.php?s=cbr&do=cvals&v=1&f=eur&iso=usd";
$respuesta = file_get_contents($url);
header('Content-Type: application/json');
echo $respuesta;
Y desde tu AJAX, en vez de llamar a freecurrencyrates.com directamente, llamas a proxy.php en tu propio dominio. Como es mismo origen, no hay problema de CORS.
David