Question

我想测试本地（file:///协议）js，根据url query-param中的名称动态加载json文件。

我正在使用chrome

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

我试过了：

var jsonPath = getParameterByName('jsonPath');

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

并收到此错误：

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.

是否有快速创建本地服务器（mac，java）进行测试的方法？

Answer 1

简单：你无法进行制作。它是您无法在客户端计算机上规避的安全功能。

您可以在机器的浏览器设置中禁用它。在Chrome中，使用--disable-web-security作为命令行参数启动浏览器。 Firefox可以使用about:config -> security.fileuri.strict_origin_policy -> false禁用该功能。

以下是在MacOS上启动网络服务器的指南：https://discussions.apple.com/docs/DOC-3083

Answer 2

您应该设置一个轻量级的Web服务器。其中有很多，但由于您熟悉Javascript，我建议使用Node创建一个满足您需求的。

下面的脚本允许您在本地指定端口，并将url参数映射到文件位置（尽管您可以轻松修改以处理更多内容）。

安装节点：https://nodejs.org/en/download/
将此脚本保存到目录（我称之为simple-server.js）。
在该目录中打开终端窗口并运行以下命令：

node simple-server.js

simple-server.js代码

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

使用file：/// protocol时，js如何动态加载json文件

2 个答案: