Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

local AJAX-call to remote site works in Safari but not in other browsers

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:

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

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 += '<br>'+'JSON-Errorstatus: '+textStatus;
    if ($.type(errorThrown) === 'string') {
        msg += '<br>'+'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
           + '&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

  1. I will NOT change the settings of my remote webserver (Apache)
  2. I will NOT manipulate any files on my remote machine (.htaccess)
  3. I will NOT set up a webserver on my local iMac
  4. I will NOT change the code of the AJAX-calls in my Javascript-files
  5. 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?

like image 505
Hubert Schölnast Avatar asked Apr 29 '15 15:04

Hubert Schölnast


1 Answers

CHROME

There is a plugin for chrome that will force it to ignore the security policy. You can also do this with flags. Note, please do not browse the "real web" with this enabled as it is a security risk for your computer.

FIREFOX

This thread indicates that there is presently no way to do this in firefox.

OPERA

Again, there does not appear to be a built in way to ignore CORS policies.

The alternative would be to have the server (http://my.domain.tld) in your case return the proper headers - specifically Access-Control-Allow-Origin:

like image 141
Robin Avatar answered Sep 27 '22 16:09

Robin