I am maintaining a website that uses Javascript. The script uses jQuery and loads some content from the server at which the site is normally hosted.

Just for convenience while maintaining the site, I run a local copy of the site on my iMac. This works perfectly fine when I use Safari. But Firefox, Opera and Chrome refuse to work. I guess it is because of cross-domain-policy. (I couldn't test this with IE, because IE has to run in a virtual machine on my iMac, so for this reason it is not possible to access any local files)

Is there a setting within Firefox and the other browsers where I can tell the browser that it is ok to ajax-load files that are located on a remote server from a local html-page with a local javascript?

In a nutshell: This my html-page:

&lt;!DOCTYPE html&gt;
&lt;html&gt;
    &lt;head&gt;
        &lt;meta charset="UTF-8"&gt;
        &lt;title&gt;some title&lt;/title&gt;
        &lt;link rel="stylesheet" type="text/css" href="../css/stylesheet.css"&gt;
        &lt;script src="../js/jquery-2.1.3.min.js"&gt;&lt;/script&gt;
        &lt;script src="../js/myScript.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
    &lt;body&gt;
        &lt;!-- some content with a div-container to receive the ajax-content --&gt;
    &lt;/body&gt;
&lt;/html&gt;


This is myScript.js:

var errorMsg = function (msg) {
    //insert the message into the html-page
};

var JSONerror = function (jqXHR, textStatus, errorThrown ) {
    var msg = 'JSON-answer: '+jqXHR.responseText;
    msg += '&lt;br&gt;'+'JSON-Errorstatus: '+textStatus;
    if ($.type(errorThrown) === 'string') {
        msg += '&lt;br&gt;'+'Error: '+errorThrown;
    }
    errorMsg(msg);
};

var JSONreceive = function (JSONobj, StatusString, jqXHR) {
    //insert the data in JSONobj into the html-page
}

var StartAJAX = function () {
    $.ajax({
        url: 'http://my.domain.tld/cgi-bin/myPerlScript.pl',
        data: "lastID=" + lastID
           + '&amp;qkz=' + Math.random(),
           dataType: "json",
           success: JSONreceive,
           error: JSONerror
    });
};


There is also an event-listener, that listens for page-scroll and resize and checks some other constraints (like: is there already an ajax-call in progress?). This listener calls StartAJAX.

When it calls StartAJAX on a local copy of my page (file:///User/...) within Safari, I get the Ajax-content perfectly fine inserted into my html-document. within the other browsers i get the error-message inserted into the html-page. It is:


  JSON-Answer: undefined
  JSON-Errorstatus: error
  Error:


Why does it work in Safari but not in Firefox, Chrome and Opera?  

How can I make those browsers work?

(I need to test it with all browsers, because all browsers render the same html-domument differently, but I don't want to upload all files to the server after every change just to test it.)

EDIT:

After reading some answers, I want to make something clear, that I obviously did not make clear enough:

I am searching for settings in Webbrowsers


I will NOT change the settings of my remote webserver (Apache)
I will NOT manipulate any files on my remote machine (.htaccess)
I will NOT set up a webserver on my local iMac
I will NOT change the code of the AJAX-calls in my Javascript-files
I will NOT change the code of the Perl-Scripts on my remote Server


I can tell you why:

I am just doing a short maintainance, and i am too lazy to upload every manipulated file to the remote machine after I edited it. The settings of the webserver are fine for actual operation. I don't want to change them (and maybe forget the changes before finishing my work). Same for the scripts: Those parts that some of you want to change work fine as they are now. There is no reason to touch the Ajax-Calls, because there is nothing wrong with them in the productive environment.

All I want is that those stupid browsers Firefox, Opera and Chrome behave like Safari and process the Ajax-calls correctly.

BTW:

Please can anyone explain what is so risky to call data via Ajax from an other domain in Firefox, Opera or Chrome while it seems to be harmless doing the same thing in Safari?


Question: Can / Should I Use The Admin Session in Frontend
Answer: Let's assume you can get access to the admin session in the frontend, I don't think there will be any issues. Just make sure that you wrap the code (actions or display) around something like this:

if (getTheAdminSession()-&gt;getUser()){//getTheAdminSession() is just a placeholder for the admin session getter
   //code or output here
}


If you have this and the admin is not logged in then there should not be any issues (in theory). Those pieces of code will be skipped.
Now the hard part. I'm not sure how it's possible to gain access to the admin session from the back-end since Magento creates 2 different cookies for them. Maybe read the cookie with the name 'adminhtml' and try to initiate the session with that value. But this will become impossible if the admin is on a separate domain. (I know it usually isn't but it may be).
If you do a simple: 

Mage::getSingleton('admin/session')


on the frontend, the object created from this code will be appended to the session file of the frontend(I only tested with session in files).  The admin session file will not be touched. 
Your session file will looke something like this:

core|a:5:{..}admin|a:2:{...}