Searching a local JSON file not working in Chrome

Question

I've have a JSON file in my local machine with several property listings in it. A snippet of the code is as follows for reference;

{
"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
        }
    }
}

Then I've written a script in AJAX that allows me to retrieve contents from the JSON file based on different attributes.

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

The thing I wanted to know is when I run this on Google Chrome(the most commonly used browser), the results do not appear and the the developer console shows the following error;

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.

But the exact same file when I run it on Firefox runs without an hiccups. Is this something to do with my code or something more browser specific?

EDIT - Since this is a browser specific security feature by the looks of it, it's even more intriguing now to know to what issues does it provide security to?

Have a read of this: https://www.html5rocks.com/en/tutorials/cors/ — Adrian Lynch, Apr 29 '17 at 12:08
Possible duplicate of [XMLHttpRequest cannot load file:///C:/Users/hamma/Desktop/rao.html](http://stackoverflow.com/questions/34533419/xmlhttprequest-cannot-load-file-c-users-hamma-desktop-rao-html) and countless others — JJJ, Apr 29 '17 at 12:10
Thank you for that. I was searching for this answer but I think my queries didnt go by it. So am I to understand that it is a security feature in chrome? If so, what sort of protection does it actually provide? I edited the question to avoid the duplicate — Nuwan Jayawardene, Apr 29 '17 at 12:18

score 0 · Answer 1 · edited May 23 '17 at 11:54

0

What I assume you get is an Access-Control-Allow-Origin. This is a security feature in chrome, but luckily it can be disabled. You have to start chrome with disable-web-security, which can be done on windows as follows,

chrome.exe --disable-web-security

Refer this for more information (Answer is also based on this).

edited May 23 '17 at 11:54

Community

1
1

answered Apr 29 '17 at 14:12

Rukshan Hassim

505
6
15

Searching a local JSON file not working in Chrome

1 Answers1