Access-Control-Allow-Origin不允許使用null

Question

我目前正在使用SoundCloud API，並希望在單擊按鈕時嵌入軌道。

我收到兩個錯誤：

XMLHttpRequest無法加載http://soundcloud.com/oembed.json?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48419073 。 Access-Control-Allow-Origin不允許使用null。

和

未捕獲的TypeError：無法讀取null的屬性'html'

這是我的代碼：

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

我在代碼中使用警報讓我知道它實際上是從SoundCloud API獲取信息。 我只是不確定還有什么阻止它嵌入。

提前謝謝，或者看看我的問題。

• jiggabits

Answer 1

閱讀一些有關同源策略的內容，以更好地了解您的主要問題。 Ajax，localhost和Chrome / Opera不能很好地融合在一起。 這個相關的問題甚至更好。

第二個問題是由於Ajax調用（在API中的某個地方），由於第一個錯誤而沒有返回html響應。

我沒有解釋問題（在上面的鏈接中有很好的解釋），而是提供解決方案。 由於您在Chrome上運行，因此有一種解決方法。 使用此選項啟動chrome：

--allow-文件訪問從 - 文件

（我從Pointy無恥地借來的解決方法）

您也可以嘗試在Firefox上運行它，或暫時托管它。 :)

---

PS如果您計划從本地計算機進行認真開發，可以考慮安裝Apache以通過http://localhost提供服務和測試內容，從而解除file:///限制。

以下是Apache和PHP預先配置用於開發的一些優秀工具：

• 對於Windows： EasyPHP ， WAMP 。
• 跨平台： XAMPP ， BitNami 。

Answer 2

如果您正在回溯，我會嘗試，提醒（document.getElementById（“track”））; 確保你得到你的dom元素。