2012-06-02 11 views
5

Aktualnie pracuję z interfejsem SoundCloud API i chciałbym, aby utwór został osadzony po kliknięciu przycisku.Null początkowy jest niedozwolony przez Access-Control-Allow-Origin

mam dwa błędy:

XMLHttpRequest nie może załadować http://soundcloud.com/oembed.json?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48419073. Pochodzenie null jest niedozwolone przez Access-Control-Allow-Origin.

I

Uncaught TypeError: nie można odczytać właściwość 'html' null

Oto mój kod:

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

używam alert w moim kodu, aby dać mi znać, że jest faktycznie pobiera informacje z interfejsu API SoundCloud. Po prostu nie jestem pewien, co jeszcze uniemożliwia jej osadzanie.

Dzięki, z wyprzedzeniem lub patrząc na moje pytanie.

  • jiggabits
+1

Czy jest to "client_id", za które trzeba było zapłacić? – Pointy

+1

Niech zgadnę, próbujesz uzyskać do niego dostęp z lokalnego hosta? –

+2

@Pointy SoundCloud to miejsce, w którym udostępniasz utwory, więc zgaduję, że ten interfejs API mógłby pobrać utwory od wybranego użytkownika. W każdym razie, OP, czy testujesz swój interfejs API lokalnie? Moje zdolności do odczytywania myśli nie są tak dobre, jak każdy inny autor odpowiedzi, a twój problem pochodzenia jest najprawdopodobniej związany z uruchamianiem twojego API lokalnie w Chrome/Opera. –

Odpowiedz

17

Przeczytaj trochę o Same Origin Policy, aby lepiej zrozumieć swój główny problem. Ajax, localhost i Chrome/Opera nie pasują do siebie. This related question jest jeszcze lepszy.

Twój drugi problem wynika z połączenia Ajax (gdzieś w twoim interfejsie API), które nie zwraca odpowiedzi html z powodu pierwszego błędu.

Zamiast wyjaśnić problem (który jest bardzo dobrze wyjaśniony w powyższych linkach), przedstawię rozwiązanie. Ponieważ używasz przeglądarki Chrome, istnieje obejście tego problemu. Zacznij chrom z tej opcji:

--allow-file-access-from-files

(obejście które bezwstydnie zapożyczone z Pointy)

Można również spróbować uruchomić go na Firefox lub gospodarzem go tymczasowo. :)


P.S. Jeśli planujesz poważny rozwój z lokalnego komputera, możesz rozważyć zainstalowanie Apache do obsługi i testowania treści poprzez http://localhost, tym samym podnosząc ograniczenia file:///.

Oto kilka doskonałych narzędzi, które pochodzą z Apache i PHP wstępnie skonfigurowane dla rozwoju:

0

Jeśli otrzymujesz utwór nazad, chciałbym spróbować, alert (document.getElementById ("track")); aby upewnić się, że dostajesz swój element dom.

+0

Wygląda na to, że jestem! – veryrarecandy

+0

Po dodaniu tego kodu do mojego alertu zwraca: [obiekt HTMLDivElement] – veryrarecandy

Powiązane problemy