Origin null is not allowed by Access-Control-Allow-Origin

Question

I'm currently working with the SoundCloud API and would like to have a track embed when a button is clicked.

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.

AND

Uncaught TypeError: Cannot read property 'html' of null

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.

Thanks, ahead of time, or looking at my question.

• jiggabits

Answer 1

Read a little about Same Origin Policy to understand your main problem better. Ajax, localhost and Chrome/Opera don't go well together. This related question is even better.

Your second problem is due to the Ajax call (somewhere in your API) which doesn't return an html response due to the first error.

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:

--allow-file-access-from-files

(workaround which I shamelessly borrowed from Pointy)

You could also try running it on Firefox, or hosting it temporarily. :)

---

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.

Here are some excellent tools that come with Apache and PHP pre-configured for development:

• For Windows: EasyPHP, WAMP.
• Cross-platform: XAMPP, BitNami.

Answer 2

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.