Geek Answers Handbook

Local AJAX call to a remote site works in Safari, but not in other browsers

I support a website that uses Javascript. The script uses jQuery and downloads some content from the server that usually hosts the site.

Just for convenience, maintaining the site, I run a local copy of the site on my iMac. This works fine when I use Safari. But Firefox, Opera and Chrome refuse to work. I think this is because of cross-domain policies. (I could not verify this using IE, because IE must run on a virtual machine on my iMac, so for this reason it is not possible to access local files)

Is there a parameter in Firefox and other browsers where I can tell the browser that this is normal for ajax-load files located on a remote server from a local html page with local javascript?

In short: this is 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 scrolling and page resizing and checks for some other restrictions (for example: does an ajax call already exist?). This listener calls StartAJAX .

When it calls StartAJAX in a local copy of my page (file: /// User / ...) in Safari, I get Ajax content that fits nicely into my html document. in other browsers, I get an error message inserted in an html page. It:

JSON Answer: undefined
JSON-Errorstatus: error
Mistake:

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

How can I make these browsers work?

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

EDIT:

After reading some of the answers, I want to make something clear, which I obviously have not made clear enough:

I am looking for settings in Webbrowsers

  • I will NOT change the settings of my remote web server (Apache)
  • I will NOT manipulate files on my remote machine (.htaccess)
  • I will not configure the web server on my local iMac
  • I will not change the code of AJAX calls in my Javascript files
  • I will not modify the Perl script code on the remote server

I can tell you why:

I'm just doing short support, and I'm too lazy to download every managed file to a remote computer after I have edited it. Web server settings are great for real work. I do not want to change them (and, possibly, forget about the changes before finishing my work). The same is true for scripts: those parts that some of you want to change work fine, as they are now. There is no reason to touch Ajax-Calls because there is nothing wrong with a productive environment.

All I want is that these stupid Firefox, Opera and Chrome browsers behave like Safari and correctly handle Ajax calls.

BTW:

Please, can you explain that it is so risky to transfer data via Ajax from another domain to Firefox, Opera or Chrome, while it seems that it is safe to do the same in Safari?

+8
javascript jquery cross-browser ajax cross-domain
source share
4 answers

CHROME

There is a plugin for chrome that will make it ignore the security policy. You can also do this with flags . Please note: please do not browse the “real network”, as this is a security risk for your computer.

FIREFOX

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

OPERA

Again, there is no built-in way to ignore CORS policies.

An alternative would be to have a server ( http: //my.domain.tld ) in your case return the correct headers - in particular Access-Control-Allow-Origin:

+4
source share

To avoid these problems, you should design your page (on your local computer in order) using a web server (e.g. apache, nginx, ...), so your ajax urls start with http or https protocol, not "file". A “file” is the path to your file, but using the SO path system, not the web server system.

Browsers, on the other hand, have a policy of "the same origin." This is a security feature, but what are the “problems” in web development using ajax calls? Well, your ajax calls are always made on the same server, for example, if you have your network in the http://my-domain.com domain, then your ajax calls must be in the same http: // my-domain .com ".

To get around SOP in ajax calls, you have three solutions:

  • Create a proxy server on your "my-domain.com" that uses curl (like php) to retrieve the data and return it to your ajax call
  • Use JSON-P
  • Let your domain on your web server (e.g. htaccess) set the correct configuration for CORS: http://enable-cors.org/

BTW

I am going to answer: "Please can someone explain what is so dangerous for calling data via Ajax from another domain." (Copy and paste from mozilla MDN https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy )

A policy of the same origin restricts the loading of a document or script from one origin can interact with a resource from another source. A policy of the same origin is used as a means of preventing some cross-site fake requests.

+3
source share

Due to the same origin policy, you usually cannot request resources from another domain. Try adding crossDomain: true to your AJAX request, as you are trying to make a request to a different domain.

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

Assuming the website is domain A and the perl script is in domain B, you have two options: 1) Enable CORS on the web server in domain B. http://enable-cors.org/ 2) Create a script (php, perl, ashx, etc.) In domain A, which invokes a script in domain B. the script in domain A will act as a proxy server and will be allowed by all web browsers.

0
source share

More articles:


All Articles