jQuery cross domain POST shenanigans

Question

I'm trying to authenticate to an API, which only allows you to authenticate using a POST with JSON as form data, in the format of {"username":"myusername","password":"mypassword"}.

I've been trying for two days to get this working with jQuery but I'm running into problems because it's cross domain. How can I accomplish this?

Error message:

Request Method:OPTIONS
Status Code:405 METHOD NOT ALLOWED

Code up till now:

var username = "myusername";
var password = "mypass"
var authurl = "https://myurl";

$.ajax
({
    type: "POST",
    url: authurl,
    dataType: 'json',
    contentType: "application/json; charset=utf-8",
    async: false,
    data: {'json':'{"username":"' + username + '", "password":"' + password + '"}'},
    success: function (result) {
        $('#json').html(result);
    }
})

To summarize:

• API only accepts POST for auth
• API requires json as form data, example: {"username":"myusername","password":"mypassword"}
• The js is ran from a different domain, causing cross domain errors

Your help is much appreciated :)

Answer 1

You should follow a different pattern. Your local JS will do an ajax post to a local URL which will accept the POST method with your json data.

At this point your server code will do an HTTP POST with proper data to the remote server, get the response, and send it back to the calling js.