Error - access-control-allow-origin

Buenas a todos, llevo varios días quebrandome la cabeza con este problema y agradecería cualquier ayuda.

Este es el error:

XMLHttpRequest cannot load http://real2.streaming-co.com:2199/recentfeed/juandavid/json/.
No 'Access-Control-Allow-Origin' header is present on the requested resource.
Origin 'http://codigo2.tk' is therefore not allowed access.

Este es el código:

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
<script>
$(document).ready(function(){
    $("button").click(function(){
        $.getJSON("http://real2.streaming-co.com:2199/recentfeed/juandavid/json/", function(resp){
            console.log(resp);
            $.each(resp.items, function(){
                console.log(this['title']);
                $("div").append(this['title'] + "<br>");
 
            });
        });
    });
});
</script>
</head>
<body>
 
<button>Get JSON data</button>
 
<div></div>
 
</body>
</html>

Respuestas

Lamentablemente este error es muy común. Las tres alternativas más comunes que tienes son las que se explican en este artículo:

Usar JSONP, pero requiere que el servidor externo lo soporte.
Usar CORS, pero de nuevo requiere que el servidor externo lo soporte.
Usar un proxy en un servidor tuyo. Cuesta un poco montarlo, pero es lo único que te va a funcionar siempre y que solo depende de ti.

Como estamos hablando de un servidor externo, las posibilidades de que cambien algo son remotas, así que tendrías que optar por el proxy en un servidor tuyo.

Hace poco me pasó algo parecido al querer obtener las estadísticas del sitio packagist.org mediante archivos JSON directamente desde el navegador. Por suerte ese sitio es software libre, por lo que pude enviar este pull request para activar el CORS en el sitio web.

@javiereguiluz

21 junio 2016, 8:45