how can js load dynamically a json file when using file:/// protocol

Question

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?

Answer 1

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.

• https://stackoverflow.com/a/6923816/2535335

• https://stackoverflow.com/a/16683851/2535335

• https://stackoverflow.com/a/5933885/2535335

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

Answer 2

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);