1

I want to test locally (file:/// protocol) js that loads dynamically json file, based on the name in the url query-param.

I'm using chrome

file:///Users/eladb/Downloads/map/map_tmp.html?jsonPath=routes_2.json

I tried this:

var jsonPath = getParameterByName('jsonPath');

$.getJSON(jsonPath, function(json) {
    console.log(json); // this will show the info it in firebug console
});

and got this error:

jquery.min.js:4 XMLHttpRequest cannot load file:///Users/eladb/Downloads/map/routes_2.json?_=1454238808580. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.

Is there a quick way to create a local server (mac, java) for testing only?

4
  • 1
    You can try to add --allow-file-access-from-files option when running chrome or install apache. Commented Jan 31, 2016 at 11:21
  • file:///Users/eladb/Downloads/map/map_tmp.html?jsonPath=routes_2.json is json path Commented Jan 31, 2016 at 11:23
  • @VasimVanzara so now, how can i fix bypass error? Commented Jan 31, 2016 at 11:45
  • the simplest workaround is to run a server, you can use any of the oneliners listed there: gist.github.com/willurd/5720255 Commented May 24, 2020 at 21:28

2 Answers 2

2

Simple: you can't in production. It's a security feature you can't circumvent on a client machine.

You can disable it in the browser settings of your machine though. In Chrome, start the browser with --disable-web-security as commandline argument. Firefox can disabled that with about:config -> security.fileuri.strict_origin_policy -> false.

Here's a guide for starting a web server on MacOS: https://discussions.apple.com/docs/DOC-3083

Sign up to request clarification or add additional context in comments.

3 Comments

I ran /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --allow-access-from-files and got same error again
yes I ran open -a Google\ Chrome\ Canary --args --allow-file-access. I still get jquery.min.js:4 XMLHttpRequest cannot load file:///Users/eladb/Downloads/map/routes_2.geojson. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https, chrome-extension-resource.
I think you also need --disable-web-security
-1

You should set up a lightweight web server. There are a number of them, but since you are familiar with Javascript, I'd recommend using Node to create one that meets your needs.

The script below will allow you to specify a port locally and also map a url params to file locations (though you could easily modify to handle more).

  1. Install Node: https://nodejs.org/en/download/
  2. Save this script to a directory (I call it simple-server.js).
  3. Open a terminal window in that directory and run the following command:

    node simple-server.js

simple-server.js code

//https://nodejs.org/en/docs/guides/anatomy-of-an-http-transaction/
var myPort = 8080;//Set pot to one not used on your box

var fs = require('fs')
var http = require('http');
console.log('Starting server...')
var server = http.createServer(function(req, resp){
    console.log('Request received. ');

    //get url param and change file based on param or url
    var param = req.url.split('?');
    if (param.length > 1) {
        param = param[1].split('=');
        if (param.length > 1) {
            param = param[1];
        }
    }

    var fileLoc = '';//Map your param to files here
    switch(param){
        case 'bar':
        fileLoc = 'C:/Projects/nodebin/bar.json';
        break;
        case 'baz':
        fileLoc = 'C:/Projects/nodebin/baz.json';
        break;
        default:
        fileLoc = 'C:/Projects/nodebin/foo.json';
        break;
    }

    fs.readFile(fileLoc, 'utf8', function(err, data) {
        if (err) {
            consoole.log(err);
        }
        else {
            console.log(data);
            resp.statusCode = 200;
            resp.setHeader('Content-Type', 'application/json');

            resp.write(data);//Echo JSON
            resp.end();
        }
    });
}).listen(myPort);

Comments

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.