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 :)

jQuery cross domain POST shenanigans

4 Answers