Cannot upload cover image for playlist, in Firefox

[Braveatom]

Issue found on January 22nd 2019.

Endpoint(s):

• PUT /v1/playlists/{playlist_id}/images

Steps to reproduce:

Using the code

` $.ajax({ url: 'https://api.spotify.com/v1/playlists/' + id + '/images',

        headers: {
            'Authorization': 'Bearer ' + $token,
        },

        contentType: 'image/jpeg',
        type: 'PUT',
        data : $upload_image.replace(/^data:image\/jpeg;base64,/, ''),

        success: function() {
            console.log('Added playlist image');
        },

        error: function(e) {
            console.log('sorry, didnt upload the image');
            console.error(e);
            show_error();
        }
    });

`

Works fine in Chrome and Safari, Firefox (65.0b12) gives the console error Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://api.spotify.com/v1/playlists/13ci30YQFmzK6ztl38zQjP/images. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).[Learn More]

Expected behaviour:

Upload the image, as per Safari and Chrome

Actual behaviour:

Cross-Origin Request Blocked

[0xNF]

I'm pretty sure this is Firefox's tracking protection kicking in. The shield in the left corner of the URL bar will have more details. There might be a tricky way around it, but I've just accepted that Firefox is more strict than other browsers for things like this.

[Braveatom]

Yeah, that seems to be it - I just tried with FF prefs adjusted from Standard to Custom (not blocking trackers) and it works as expected.

Thats annoying, but thanks for figuring out, at least there's nothing I can do code side.

[0xNF]

fwiw I think the canonical way around this problem to have your own server be a middleman, and to call pass-through apis via your server as opposed to directly interfacing with Spotify from the browser. It's definitely more work, though.