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.