Jquery ajax POST url getting changed and bad request returned

Question

I am using a function from Spotify Playlist Creator in my file to send a POST request to the API to create a new playlist. The function works fine when i run the "Spotify Playlist Creator" code, with the POST request returning a response object with a new playlist id. But the same POST request returns "400 : Bad Request" when run from my code.

Other GET requests (user profile requests) are working fine (and hence i am guessng the authorization flow is successful and the access_token is valid.)

When i used the Chrome inspector, one thing that i noticed is that in the working app, the POST url is Request URL:https://api.spotify.com/v1/users/121856107/playlists In my app it is Request URL:https://api.spotify.com/v1/users/121856107/playlists?{%22name%22:%22test_playlist%22,%22public%22:false}

Here the url has the data elements appended to it. Why is this happening? Any pointers ?

Below i have pasted the function which is behaving differently in two different sites.

Update: It appears that the POST request is somehow converted to OPTIONS. A quick search showed that this behaviour might be related to "Same origin policy". How do i get my function to start working?

function createPlaylist(username, name, callback) {
    var url = 'https://api.spotify.com/v1/users/' + username +
        '/playlists';
    $.ajax(url, {
        method: 'POST',
        data: JSON.stringify({
            'name': name,
            'public': false
        }),
        dataType: 'json',
        headers: {
            'Authorization': 'Bearer ' + g_access_token,
            'Content-Type': 'application/json'
        },
        success: function(r) {
            console.log('create playlist response', r);
            callback(r.id);
        },
        error: function(r) {
            callback(null);
        }
    });
}