JQuery data is not passed in the ajax post request, Hence get 415 Unsupported Media Type status code

Question

I am trying to make a call to an api (post) via jquery, but the jquery call does not pass any data to the api and hence it fails by sending a response with status code 415 Unsupported Media Type. I have pasted the jquery code below. Am I missing something?

login: function () {

    var authData = {
        "UserName": $("#email").val(),
        "Password": $("#pass").val()
    };

    var url = apiUrl() + '/sessiontoken';

    $.ajax(url, {
        type: "post",
        data: JSON.stringify(authData),
        success: function (data, textStatus, jqXHR) {},
        beforeSend: function (xhr) {
            xhr.setRequestHeader("accept", "application/json");
            xhr.setRequestHeader("Content-Type", "application/json");
        }
    });
    return false;

}

The url was returning 404 status from rest console. Corrected the url and everthing is working fine now.

Answer 1

Your ajax settings is wrong because you have opened { at wrong place. It should be like below. Also, since you are posting to another domain (cross domain request), set crossDomain: true in ajax settings:

$.ajax({
    url: url,
    type: "post",
    crossDomain: true,
    data: JSON.stringify(authData),
    success: function (data, textStatus, jqXHR) {},
    beforeSend: function (xhr) {
        xhr.setRequestHeader("accept", "application/json");
        xhr.setRequestHeader("Content-Type", "application/json");
    }
});