SoundCloud Cross-Origin Request Blocked at https://l9bjkkhaycw6f8f4.soundcloud.com/v1/events

Question

I am trying to use the Soundcloud widget API found here.

I have my Iframe

<iframe id="SCIframe"></iframe

I included the script

<script src="https://w.soundcloud.com/player/api.js" type="text/javascript"></script>

Then, I execute this script in a function.

var scPlayer;
var iframeSoundcloud = document.getElementById("SCIframe");
iframeSoundcloud.src = "https://w.soundcloud.com/player/?url="+encodeURIComponent(lien);
        scPlayer = SC.Widget("SCIframe");

scPlayer.bind(SC.Widget.Events.READY, function(){
            scPlayer.play();
        });

When the page first loaded, the soundcloud song plays well. But when I call it another time without refreshing the page, I get Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://l9bjkkhaycw6f8f4.soundcloud.com/v1/events. (Reason: CORS header 'Access-Control-Allow-Origin' does not match '').* message, and the song cannot play.

Why is that?

user3502626 user3502626 · Accepted Answer · 2016-11-05T23:42:09

The problem was from the Iframe. I generate a new Iframe every-time I want to play a new song.

var frameSCID = "scIframe"+new Date().getMilliseconds();
        var iframeSC = $('<iframe></iframe>');
        iframeSC.attr({"id":frameSCID, "src":"https://w.soundcloud.com/player/?url="+encodeURIComponent(lien)});

        $("#scIframeContainer").html(iframeSC);
        scPlayer = SC.Widget(frameSCID);

...

If someone has a better way to fix it. I'm waiting

SoundCloud Cross-Origin Request Blocked at https://l9bjkkhaycw6f8f4.soundcloud.com/v1/events

1 Answers