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

Question

我目前正在使用 SoundCloud API，并希望在单击按钮时嵌入轨道。

我收到两个错误：

XMLHttpRequest 无法加载 http://soundcloud.com/oembed.json?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48419073。 Access-Control-Allow-Origin 不允许 Origin null。

与

未捕获的类型错误：无法读取 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：

--allow-file-access-from-files

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

您也可以尝试在 Firefox 上运行它，或临时托管它。 :)

---

附：如果您打算从本地计算机进行认真的开发，您可以考虑安装 Apache 以通过 http://localhost 提供和测试内容，从而解除 file:/// 的限制。

这里有一些为开发而预先配置的 Apache 和 PHP 附带的优秀工具：

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

Answer 2

如果您要回溯，我会尝试 alert(document.getElementById("track"));以确保你得到你的 dom 元素。