Question

我尝试从我的本地项目加载一个json文件，该文件没有在网络服务器上运行。

test.json

[{
    name : "Google",
    url : "https://www.google.com",
},
{
    name : "Bing",
    url : "https://www.bing.com",                            
}]

首次尝试：

首先，我尝试使用项目文件夹中的本地文件。

loadJSON("data/test.json", function(response) {

    console.log(JSON.parse(response));
});

function loadJSON(path, callback) {   

var xobj = new XMLHttpRequest();

    xobj.overrideMimeType("application/json");
    xobj.open('GET', path, true); // Replace 'my_data' with the path to your file
    xobj.onreadystatechange = function () {
        if (xobj.readyState == 4 && xobj.status == "200") {
            // Required use of an anonymous callback as .open will NOT return a value but simply returns undefined in asynchronous mode
            callback(xobj.responseText);
        }
    };
    xobj.send(null);  
}

响应：

index.html：616无法加载 file：/// C：/wamp64/www/projects/Startseite/data/test.json：交叉起源请求仅支持协议方案：http，data，chrome， chrome-extension，https。

然后我研究了错误，设置了一个虚拟主机并将调用更改为：

loadJSON("http://ressources/data/test.json", function(response) {

    console.log(JSON.parse(response));
});

响应：

无法加载http://ressources/data/test.json：否请求中存在“Access-Control-Allow-Origin”标头资源。因此，不允许原点'null'访问。

是否可以在不使用网络服务器或安装更改标题的浏览器插件的情况下加载json？

Answer 1

对于JSON，您可以使用JSONP，它是专为跨域和每个网址设计的，绝对的或相对的。

https://www.w3schools.com/js/js_json_jsonp.asp和 http://api.jquery.com/jquery.getjson/

的test.html

<script>
    function jsonp(data){
      console.log(data)
    }
</script>
<script src="test.js"></script>

test.js

jsonp([{
  name : "Google",
  url : "https://www.google.com",
},
  {
    name : "Bing",
    url : "https://www.bing.com",
  }])

Answer 2

在浏览器上运行javascript时，我认为没有web服务器就无法从文件系统访问文件。如果您只是想使用javascript处理这些文件，可以通过使用节点在您的计算机上运行javascript来实现。否则我不知道其他任何方式，但你可能想看看这个：

Local file access with javascript

Answer 3

你不能那样做。如果无法添加Web服务器，则可以选择将JSON数据移动到单独的.js文件中。由于您的JSON文件如下所示：

    [{
        name : "Customer Support OTRS",
        url : "https://support.hecht-international.com",
        desc : "<strong>Customer Support OTRS</strong><br><br>Callagent<br>online",
        img : "img/otrs_thumb.PNG",
    },
{
        name : "hechtAbasConverter",
        url : "https://hac.hecht-international.com/gui/login.php",
        desc : "<strong>hechtAbasConverter - hac</strong><br><br>online",                            
        img : "img/easylife/hac.png",
    }]

将其移至jsondata.js

var jsonData = [{
        name : "Customer Support OTRS",
        url : "https://support.hecht-international.com",
        desc : "<strong>Customer Support OTRS</strong><br><br>Callagent<br>online",
        img : "img/otrs_thumb.PNG",
    },
    {
        name : "hechtAbasConverter",
        url : "https://hac.hecht-international.com/gui/login.php",
        desc : "<strong>hechtAbasConverter - hac</strong><br><br>online",                            
        img : "img/easylife/hac.png",
    }]

并以HTML格式加载新文件

<script type="text/javascript" src="path/to/jsondata.js"></script>

在不使用webserver的情况下在本地项目中加载json文件

3 个答案: