跨域ajax调用问题

Question

I am writing code that runs on an https:// page. I want to communicate with an http:// page from my page.

I am using following code:

var USERNAME = "*****";
var PASSWORD = "****"

$.ajax({
    type: "POST",
    contentType: 'application/json; charset=utf-8',
    dataType: 'json',
     headers: {
      "Authorization": encodeURI("BASIC " + btoa(USERNAME + ":" + PASSWORD))
    },
    url: "http://111.93.214.93/data",
    data: JSON.stringify(data)
})
.done(function(response) {
    alert("Shuffled image successfully")
})
.fail(function(jqXHR, textStatus, errorThrown) {
    console.log(jqXHR, textStatus, errorThrown);
    alert("Server Error");
})
.always(function(jqXHROrData, textStatus, jqXHROrErrorThrown) {});

Is this right the method to call?

I am getting a "404 Not Found" error.

I have tried this also. but it is not helping

type: "POST",
                    contentType: 'application/json; charset=utf-8',
                    async:false,
                    crossDomain: true,
                    callback: '?',
                    dataType: 'jsonp',
                    headers: {
                      "Authorization": "Basic " + btoa(unescape(encodeURIComponent(USERNAME + ":" + PASSWORD)))
                    },

Answer 1

According to W3, it's not possible through a COR policy due to "certificate errors" http://www.w3.org/TR/access-control/#user-agent-security

But you can try this
Add the Access-Control-Allow-Origin header from the server

Access-Control-Allow-Origin: https://www.example.com
http://en.wikipedia.org/wiki/Cross-Origin_Resource_Sharing