Javascript Access-Control-Allow-Origin 不允许 Origin null
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/10865869/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Origin null is not allowed by Access-Control-Allow-Origin
提问by veryrarecandy
I'm currently working with the SoundCloud API and would like to have a track embed when a button is clicked.
我目前正在使用 SoundCloud API，并希望在单击按钮时嵌入轨道。
I get two errors:
我收到两个错误：
XMLHttpRequest cannot load http://soundcloud.com/oembed.json?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48419073. Origin null is not allowed by Access-Control-Allow-Origin.
XMLHttpRequest 无法加载http://soundcloud.com/oembed.json?url=http%3A%2F%2Fapi.soundcloud.com%2Ftracks%2F48419073。Access-Control-Allow-Origin 不允许 Origin null。
AND
和
Uncaught TypeError: Cannot read property 'html' of null
未捕获的类型错误：无法读取 null 的属性“html”
Here is my code:
这是我的代码：
<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>
I use an alert in my code to let me know that it is actually taking information from the SoundCloud API. I'm just not sure what else is preventing it from embedding.
我在我的代码中使用警报让我知道它实际上是从 SoundCloud API 获取信息。我只是不确定还有什么阻止它嵌入。
Thanks, ahead of time, or looking at my question.
谢谢，提前，或者看看我的问题。
- jiggabits
- 吉比特
回答by Fabrício Matté
Read a little about Same Origin Policyto understand your main problem better. Ajax, localhost and Chrome/Opera don't go well together. This related questionis even better.
阅读一些有关同源政策的信息，以更好地了解您的主要问题。Ajax、本地主机和 Chrome/Opera 不能很好地配合使用。这个相关的问题甚至更好。
Your second problem is due to the Ajax call (somewhere in your API) which doesn't return an htmlresponse due to the first error.
您的第二个问题是由于 Ajax 调用（在您的 API 中的某处）html由于第一个错误而没有返回响应。
Instead of explaining the issue (which is very well explained in the links above), I'll provide a solution. Since you're running on Chrome, there's an workaround for that. Start chrome with this option:
我将提供一个解决方案，而不是解释问题（在上面的链接中有很好的解释）。由于您在 Chrome 上运行，因此有一种解决方法。使用此选项启动 chrome：
--allow-file-access-from-files
--allow-file-access-from-files
(workaround which I shamelessly borrowed from Pointy)
（我无耻地从Pointy借来的解决方法）
You could also try running it on Firefox, or hosting it temporarily. :)
您也可以尝试在 Firefox 上运行它，或临时托管它。:)
P.S. If you plan on doing serious development from your local machine, you may consider installing Apache to serve and test content through http://localhost, thus lifting the file:///restrictions.
PS 如果您打算在本地机器上进行认真的开发，您可以考虑安装 Apache 以通过 提供和测试内容http://localhost，从而解除file:///限制。
Here are some excellent tools that come with Apache and PHP pre-configured for development:
以下是 Apache 和 PHP 预配置用于开发的一些优秀工具：
回答by Vinyl Windows
If you're getting a track back, the I would try, alert(document.getElementById("track")); to make sure that you're getting your dom element.
如果您要回溯，我会尝试， alert(document.getElementById("track")); 以确保您获得 dom 元素。
