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

阅读一些关于Same Origin Policy的内容，以便更好地了解您的主要问题。 Ajax，localhost和Chrome / Opera不能很好地融合在一起。 This related question甚至更好。

您的第二个问题是由于Ajax调用（在API中的某个位置），由于第一个错误而未返回html响应。

我没有解释问题（在上面的链接中有很好的解释），而是提供解决方案。由于您在Chrome上运行，因此有一种解决方法。使用此选项启动chrome：

- 允许文件存取从-文件

（我无耻地从Pointy借来的解决方法）

您也可以尝试在Firefox上运行它，或暂时托管它。：）

P.S。如果您计划从本地计算机进行认真开发，可以考虑安装Apache以通过http://localhost提供服务并测试内容，从而解除file:///限制。

以下是Apache和PHP预先配置用于开发的一些优秀工具：

对于Windows：EasyPHP，WAMP。
跨平台：XAMPP，BitNami。

Answer 2

如果您正在回溯，我会尝试，提醒（document.getElementById（“track”））;确保你得到你的dom元素。

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

2 个答案: