Category Archives: audio-streaming

SC stream not working on Safari: Accept-Encoding header

I'm working on this SoundCloud music-streaming service.

As you enter, I make a request to SC to get some values in order to set the music player. It works fine on Chrome and Firefox, but Safari (both on a Mac and an iPhone) returns these errors on the console:

[Error] Failed to load resource: Request header field Accept-Encoding is not allowed by Access-Control-Allow-Headers. (208248726.json, line 0)

[Error] XMLHttpRequest cannot load https://api.soundcloud.com/tracks/208248726.json?client_id=55c6772672dd77c1147fc334e0d5ed83. Request header field Accept-Encoding is not allowed by Access-Control-Allow-Headers. (www.viberaid.com, line 0)

As I understand it, there's a problem with Safari not setting Accept-Encoding, so I found this piece of code and put it into my .htaccess:

<IfModule mod_headers.c>
  <FilesMatch "\.(js|css|xml|gz)$">
    Header append Vary: Accept-Encoding
  </FilesMatch>
</IfModule>

Also this:

<IfModule mod_headers.c>
    Header append Vary: Accept-Encoding
</IfModule>

But neither are working, I'm getting the same response from the browser. I found this guy with just the exact same problem as me, but no response yet. Anyone knows what could be going wrong? I'm quite a newbie editing the htaccess and have close to zero knowledge on this, so I would love a ELI5 answer :)

Just to contextualize the problem, it's a Wordpress using JPlayer to stream music from SC with their own API.