Is this crossdomain issue in jquery?

Question

I'm not sure if this is crossdomain issue or not. I'm trying to use $.ajax to load file. But some file I get readyState=4 and some file I get readyState=1

This is the path where I run my jasmine test file:///home/myname/development/path1/path2/src/test/java/javascript/jasmine/SpecRunner.html

And in the code I used jQuery.pyte to require relevant file. But it's stuck at readyState:1 when the code comes to $.ajax

if I do something like this, it returns readyState=4 correctly and print out the content inside SpecRunner.html


$.ajax({url: 'file:///home/myname/development/path1/path2/src/test/java/javascript/jasmine/SpecRunner.html', async: false}).responseText

but if I do something like this, I only get readyState=1 and nothing is returned.


$.ajax({url: 'file:///home/myname/development/path1/path2/src/main/webapp/static/js/core/application/FileThatIWant.js', async: false}).responseText

That is most likely a crossdomain issue. Files requested locally like that doesn't get an origin, so the browser cannot determine that the file has the same origin as the document, I believe. — Christofer Eliasson, Nov 06 '12 at 23:02
The `file` pseudo protocol isn't analogous to `https?`. There are subtle differences. I'd always recommend using a server. — alex, Nov 06 '12 at 23:03
Most browsers don't allow access to the local filesystem for obvious security reasons (that's different from cross-domain). Which browser (with which settings) are you using? — Bergi, Nov 06 '12 at 23:03
use relative url not absolute for local file. Some browsers won't allow local file ajax either ( unless running a local server), some will — charlietfl, Nov 06 '12 at 23:03
I faced something similar.. but I am not sure if it same in your case.. but take a look at http://stackoverflow.com/questions/12611469/get-list-of-jquery-ui-themes-from-an-url-same-origin-policy — Selvakumar Arumugam, Nov 06 '12 at 23:03
path relative to page you are calling from. Also `async: false` is deprecated and causes unforseen problems when used — charlietfl, Nov 06 '12 at 23:14

score 1 · Accepted Answer · answered Nov 06 '12 at 23:05

1

you should avoid file:// URLs in general, because browsers do not allow them in many different places. Try XAMPP it's a simple to use local webserver, you will definitively need one.

answered Nov 06 '12 at 23:05

Moritz Mahringer

1,240
16
28

score 1 · Answer 2 · answered Nov 07 '12 at 01:26

Yes, this is a cross-domain issue. You can solve this problem by forcing jQuery to use crossdomain AJAX (JSONP).

$.ajax({
    url:            "yoururl",
    cache:          false,
    crossDomain:    true,
    data:           {}, //put your GET parameters here or directly into the url
    dataType:       "jsonp",
    processData:    true,
    success:        function(data, textStatus, jqXHR){
                        //This will be executed if it worked
                    },
    error:          function(data, textStatus, jqXHR){
                        //This will be executed if it failed
                    },
    timeout:        4000, //You can put any value here
    traditional:    true,
    type:           "GET"
});

jQuery will automatically add a callback parameter containing a random string (&callback=XXXXXX). The target URL needs to output the following:

XXXXX(your_output_encoded_in_JSON);

where XXXXX is the random string. The PHP code to do so is:

echo $_GET["callback"]."(".json_encode($myoutput).");";

Make sure that the PHP (or whatever language you're using) page ONLY outputs that! If, instead, the page you are querying is not built dynamically, such as an HTML page, you need to add the following options to the $.ajax options object:

jsonp:          false,
jsonpCallback:  "mycallback",
mimeType:       "text/javascript",

Your .html file will contain something like this:

mycallback("<html><head></head><body>TEST PAGE. This is a double quote: \" and I didn't forget to escape it!</body></html>");

This technique is very handy to bypass the strict crossdomain restrictions hardcoded in browsers, but it only supports GET parameters. XMLHTTPRequest v2 supports cross-domain requests, but we won't be able to assume that all users have a XHRv2-compatible browser before at least 2016. http://caniuse.com/xhr2

Is this crossdomain issue in jquery?

2 Answers2