XMLHttpRequest cannot load data. No 'Access-Control-Allow-Origin' header is present on the requested resource

Question

I am trying to create my first API and use JQuery with Ajax to submit a login form. The issue is that in the console I get the response "XMLHttpRequest cannot load data. No 'Access-Control-Allow-Origin' header is present on the requested resource."

I have connected to my API with GET requests and the header Access-Control-Allow-Origin is defined there, but I do not know why my Ajax request is failing.

Here is a screenshot of the google chrome developer window:

This is the JQuery code that requests the data (Submission triggers and other irrelevant parts have been removed)

$.ajax({
    type: "POST",
    url: "http://api.subjectplanner.co.uk",
    data:{json:"true",com:"login",username:$('#LoginUsername').val(),password:$('#LoginPassword').val()},
    success: function(Response) {
        var Data = $.parseJSON(Response);
        if(Data.loginerror==0){
            $.cookie("SID", Data.sid, {expires:Data.expire, path:'/', domain:'.subjectplanner.co.uk'});
            alert("You have been logged in!");
        }else{
            $('#LoginFormError').html(Data.loginmessage);
            $('#LoginFormError').slideDown();
        }   
    }
});

Answer 1

Spell check, always spell check!..

I misspelled origin (I had put orgin if you look at the screenshot). I have resolved the issue now!