搜索本地 JSON 文件在 Chrome 中不起作用

Question

我的本​​地机器中有一个 JSON 文件，其中包含多个属性列表。 一个sn-p的代码如下，供参考；

{
"properties": [
    {
        "id":"prop1",
        "type":"House",
        "bedrooms":3,
        "price":650000,
        "tenure":"Freehold",
        "description":"something something etc...",
        "location":"Petts Wood Road, Petts Wood, Orpington",
        "picture":"images/prop1pic1small.jpg",
        "url":"prop1.html",
        "added": {
            "month":"January",
            "day":12,
            "year":2016
        }
    }
}

然后我用 AJAX 编写了一个脚本，允许我根据不同的属性从 JSON 文件中检索内容。

btnType.addEventListener('click', function() { //search by house type
    var searchText = document.getElementById("search").value;
    $.ajax ({
        url: 'properties.json', 
        dataType: 'json',
        type: 'get',
        cache: 'false',
        success: function(data) {
             var noResults = 0; // this variable is used to capture if no results are returned
             var output = '<ul>'; //the final output is concatenated to one variable to be displayed
             var len = data.properties.length;

             for (i=0; i < len; i++) {  //condition is checked with the JSON data and returns only the valid results
                 if (data.properties[i].type == searchText) {
                    output += '<section id = "oneResult">';
                    output += '<p id = "resultID">Property Code: ' + data.properties[i].id + '</p>'; 
                    output += '<img src = "'+data.properties[i].picture+'">';
                    output += '<p id = "resltDesc">'+data.properties[i].description+'</p> <a href = "'+data.properties[i].url+'" target = "_blank">See More</a> <br>';
                    output += '<p>Going for $'+data.properties[i].price+'</p> <br>';
                    output += '</section><br><br>';
                    noResults++;
                 }
             }
             output += '</ul>';
             $('#update').html(output); //final output displayed
             if (noResults == 0) {
                 $('#update').html("No results found");
             }
        }        
    });
});

我想知道的是，当我在谷歌浏览器（最常用的浏览器）上运行它时，没有出现结果，开发者控制台显示以下错误；

XMLHttpRequest cannot load file:///D:/IIT/LVL5%20SEM1/Adv.%20Client%20side%20Web/FINAL%20CW/FINAL%20FILES/2015235-w1608508-CW2-ACWD/properties.json. Cross origin requests are only supported for protocol schemes: http, data, chrome, chrome-extension, https.

但是当我在 Firefox 上运行它时，完全相同的文件运行时没有打嗝。 这与我的代码有关还是与浏览器相关？

编辑 - 由于从外观上看这是一个特定于浏览器的安全功能，现在更有趣的是要知道它为哪些问题提供了安全性？

Answer 1

我假设你得到的是一个 Access-Control-Allow-Origin。这是 chrome 中的一项安全功能，但幸运的是它可以被禁用。您必须使用 disable-web-security 启动 chrome，这可以在 windows 上按如下方式完成，

chrome.exe --disable-web-security

更多信息请参考 this （答案也是基于此）。