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.