Using Jquery for for an ajax uploader running into document error on trigger

Question

I have a form that I am using jquery form to upload files with ajax.

The problem I am having is this.

the url the form is on is http://admin.kaalaphp.com?cmd=cXVKd29jMnlwYW1WajZ1anlKWFIzJTJCR2xyWkt6dEglMkJWbEt1cHNhRFYydGFvbCUyQkJxcTdTZ21hWnlobGJNejY5aw%3D%3D

but the ajax call is to http://kaalaphp.com/ajax_processes/uploadImages.php

when the upload is triggered the following javascript error is generated.

[jquery.form] Server abort: Error: Permission denied to access property 'document' (Error)

This is related to cross domain ajax calls, I am wondering if there is a quick fix to allow this to work.

$(document).ready(function() {
var options = {
crossDomain: true
};
// pass options to ajaxForm
$("#upload_images").ajaxForm(options);
$("#upload_images").on('change', '#media_images', function(){
$("#ajaxUploader").html("");
$("#ajaxUploader").html('<img src="http://kaalaphp.com/images/loading.gif" alt="Uploading...."/> Uploading....');
$("#upload_images").ajaxForm({
target: "#ajaxUploader"
}).submit();
});
}); 

Thanks

Answer 1

Try configuring an Access-Control-Allow-Origin header on your uploadImages.php file

As a whitelist...

header('Access-Control-Allow-Origin: http://admin.kaalaphp.com, http://kaalaphp.com');

or alternatively...

header('Access-Control-Allow-Origin: *');

Place this code before any headers are sent