2012-06-02 13 views
5

Actualmente estoy trabajando con la API de SoundCloud y me gustaría tener una pista incrustada cuando se hace clic en un botón.El nulo de origen no está permitido por Access-Control-Allow-Origin

me sale dos errores:

XMLHttpRequest no puede cargar http://soundcloud.com/oembed.json?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48419073. El nulo de origen no está permitido por Access-Control-Allow-Origin.

Y

TypeError no detectada: No se puede leer la propiedad 'html' de null

Aquí está mi código:

<button onclick="getPopular()">+1</button> 
<div id="track"></div> 

<script src="http://connect.soundcloud.com/sdk.js" type="text/JavaScript"></script> 
<script type="text/JavaScript"> 
    SC.initialize({ 
     client_id: "**************", 
    }); 

    var getPopular = function() { 
     SC.get("/tracks", {limit: 1}, function(tracks) { 
      var track = tracks[0]; 
      alert("Latest track: " + track.title); 
      SC.oEmbed(track.uri, document.getElementById("track")); 
      }); 
     }; 
</script> 

utilizo una alerta en mi código para hacerme saber que es realmente tomando información de la API de SoundCloud. Simplemente no estoy seguro de qué más está impidiendo que se incruste.

Gracias, de antemano, o mirando mi pregunta.

  • jiggabits
+1

¿Es ese "client_id" algo que tuvo que pagar? – Pointy

+1

Déjame adivinar, ¿estás intentando acceder a él desde tu servidor local? –

+2

@Pointy SoundCloud es un lugar donde compartes canciones, así que supongo que esta API captará las canciones de un usuario seleccionado. De todos modos, OP, ¿estás probando tu API localmente? Mis poderes para leer la mente no son tan buenos como para todos los demás SO y su problema de origen probablemente se relaciona con la ejecución local de su API en Chrome/Opera. –

Respuesta

17

Lea un poco acerca de Same Origin Policy para comprender mejor su problema principal. Ajax, localhost y Chrome/Opera no van bien juntos. This related question es aún mejor.

Su segundo problema se debe a la llamada Ajax (en algún lugar de su API) que no devuelve una respuesta html debido al primer error.

En lugar de explicar el problema (que está muy bien explicado en los enlaces anteriores), proporcionaré una solución. Dado que se está ejecutando en Chrome, hay una solución para eso. Comience cromo con esta opción:

--allow-file-access-from-files

(solución que he descaradamente prestado de Pointy)

También podría intentar ejecutarlo en Firefox o alojamiento de forma temporal. :)


P.S. Si planea realizar un desarrollo serio desde su máquina local, puede considerar instalar Apache para servir y probar contenido a través del http://localhost, levantando así las restricciones file:///.

Éstos son algunos excelentes herramientas que vienen con Apache y PHP pre-configurado para el desarrollo:

0

Si usted está recibiendo una pista de nuevo, el que me gustaría probar, alerta (document.getElementById ("pista")); para asegurarte de que obtienes tu elemento dom.

+0

Parece que estoy! – veryrarecandy

+0

Cuando agrego ese código a mi alerta, devuelve: [objeto HTMLDivElement] – veryrarecandy

Cuestiones relacionadas