No 'Access-Control-Allow-Origin' header in jquery ajax in magento site

Question

I had used jquery ajax in my magento website.it is working fine on the localhost but on live i am getting error as follows.

XMLHttpRequest cannot load https://www.abc.com/customer/ajax/cartpreviewdelete/. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://www.abc.com' is therefore not allowed access.

my code for the ajax call is as follows.

$(".btn-remove2").click(function(){
    prod_id = $(this).attr("id");
    $.ajax({
        url: "<?php echo Mage::getUrl('customer/ajax/cartpreviewdelete'); ?>",
        type: "POST",
        data: {prod_id : prod_id},
        success: function(data){
            location.reload();
        }
    });
})

Answer 1

So your call does not work because you are making a request from https to http.
You can try to make the call to a secure url like this:

url: "<?php echo Mage::getUrl('customer/ajax/cartpreviewdelete', array('_secure'=>true)); ?>",

Answer 2

AJAX-Request has to go to the same domain, this means, you are NOT allowed to change one of the following:

• protocol (which you do)
• port
• domain (including subdomain, which is disallowed too!)