Origine non consentita da Access-Control-Allow-Origin

Question

Attualmente sto lavorando con l'API di SoundCloud e vorrei avere un binario incorporato quando si fa clic su un pulsante.

ottengo due errori:

XMLHttpRequest non può caricare http://soundcloud.com/oembed.json?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48419073. L'origine null non è consentita da Access-Control-Allow-Origin.

E

TypeError Uncaught: Impossibile leggere la proprietà 'html' di null

Ecco il mio codice:

<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> 

Io uso un avviso nel mio codice per farmi sapere che si tratta di effettivamente prendendo informazioni dall'API SoundCloud. Non sono sicuro di cosa altro stia impedendo l'incorporamento.

Grazie, prima del tempo, o guardando la mia domanda.

• jiggabits

Answer 1

Leggete un po 'su Same Origin Policy per capire meglio il vostro problema principale. Ajax, localhost e Chrome/Opera non vanno d'accordo. This related question è ancora meglio.

Il tuo secondo problema è dovuto alla chiamata Ajax (da qualche parte nella tua API) che non restituisce una risposta html a causa del primo errore.

Invece di spiegare il problema (che è molto ben spiegato nei link sopra), fornirò una soluzione. Dato che stai utilizzando Chrome, c'è una soluzione alternativa. Inizia cromato con questa opzione:

--allow-file-access-from-files

(soluzione che ho spudoratamente preso in prestito da Pointy)

Si potrebbe anche provare in esecuzione su Firefox, o ospitare temporaneamente. :)

---

P.S. Se si intende eseguire uno sviluppo serio dal proprio computer locale, è possibile installare Apache per servire e testare il contenuto tramite http://localhost, sollevando così le restrizioni file:///.

Ecco alcuni ottimi strumenti che vengono con Apache e PHP pre-configurato per lo sviluppo:

• Per Windows: EasyPHP, WAMP.
• multipiattaforma: XAMPP, BitNami.

Answer 2

Se stai ricevendo una traccia indietro, la vorrei provare, alert (document.getElementById ("traccia")); per assicurarti di ottenere il tuo elemento dom.