403 error from jQuery Ajax (but not from XMLHttpRequest)

Question

I have two Ajax calls, one using XMLHttpRequest and one using jQuery. The first one completes successfully. The second appears to complete successfully (the success function is called), but ends by throwing a 403 error.

The code for the XMLHttpRequest (that works) is:

function myfunction() {

    var apikey = document.getElementById( "apikey" ).value;
    var username = document.getElementById( "username" ).value;
    var password = document.getElementById( "password" ).value;

    xmlHttpReq = new XMLHttpRequest();

    xmlHttpReq.onreadystatechange = function() {
        if ( xmlHttpReq.readyState == 4 ) {
            if ( xmlHttpReq.status == 200 ) {
                document.getElementById( "results" ).textContent = xmlHttpReq.responseText;
                alert(xmlHttpReq.responseText);
            }
            else {
                alert( xmlHttpReq.statusText );
            }
        } 
    }

    xmlHttpReq.open( "POST" , url , true );
    xmlHttpReq.setRequestHeader("Content-Type", "application/json");
    xmlHttpReq.setRequestHeader("Access-Control-Allow-Origin","*");
    xmlHttpReq.setRequestHeader( "x-api-key" , apikey );
    xmlHttpReq.setRequestHeader("Access-Control-Allow-Methods", "POST,OPTIONS");
    xmlHttpReq.setRequestHeader("Access-Control-Allow-Headers", "Origin,Accept,X-Requested-With,Content-Type,X-Amz-Date,Authorization,x-api-key,X-Amz-Security-Token" );
    xmlHttpReq.send( '{ "username" : "' + username + '" , "password" : "' + password + '" }' );

}

The code for the jQuery that returns a 403 error is:

$( "#jquerySubmit" ).click( function() {

    var apikey = $( "#apikey" ).val();
    var username = $( "#username" ).val();
    var password = $( "#password" ).val();

    var dataObject = '{ "username" : "' + username + '" , "password" : "' + password + '"}';

    $.ajax( { url : url , 
              type : 'POST' ,
              dataType: 'json' ,
              headers : {
                'Access-Control-Allow-Origin' : "*" ,
                'x-api-key' : apikey ,
                'Access-Control-Allow-Methods' : 'POST,OPTIONS',
                'Access-Control-Allow-Headers' : 'Origin,Accept,X-Requested-With,Content-Type,X-Amz-Date,Authorization,x-api-key,X-Amz-Security-Token'
              },
              success: function (result) {
                    alert( result.body );
              },
              error: function (error) {
                    alert( error.responseText );
              },
              data : dataObject
    } );
});

The success alert statement successfully fires and displays the expected results , but then throws the 403 error.

Can anyone see an problem?

Answer 1

A 403 error is likely that it's not receiving the username/password correctly. This is probably because you are setting up the the dataObject correctly. In this context, it should be set up like a query string and not a JSON object.

Instead of this:

var dataObject = '{ "username" : "' + username + '" , "password" : "' + password + '"}';

Try this:

var dataObject = 'username='+username+'&password='+password;

Or, if you want to be fancy, use jquery's serialize :

var dataObject = $("#username,#password").serialize();

Answer 2

Figured it out. I had my username and password input elements within a form. So the Ajax call was submitted and finishing successfully. Then, the form was being submitted and didn't have the x-api-key header, so it was failing.