Problems while rescuing data from a json file

Question

I am trying to upload data from a json file to an html table.

I’m trying to rescue the json this way:

function getJson(){
    $.getJSON('dados/livros.json', function(data){
        console.log(data);
    });
}

Example of json I’m trying to rescue:

{
"livros": [
        {
            "id":1,
            "imagem":"images/JavaScriptEJquery.jpg",
            "nome":"Javascript e Jquery - Desenvolvimento de Interfaces Web Interativas",
            "autor":"JON DUCKETT",
            "genero":"Didatico",
            "anoEdicao":"2016",
            "editora":"AltaBooks",
            "estado":"Disponivel"
        },
        {
            "id":2,      
            "imagem":"images/ScrumAArteDeFazerODobroNaMetadeDoTempo.jpg",
            "nome":"Scrum - A Arte de Fazer o Trabalho na Metade do Tempo",
            "autor":"JEFF SUTHERLAND",
            "genero":"Didatico",
            "anoEdicao":"2016",
            "editora":"LEYA",
            "estado":"Indisponivel"
        }
    ]
}

Location of the json file:

Error:

jquery-3.3.1.js:9600 Access to Xmlhttprequest at 'file://D:/Catalogo%20de%20Livros/dados/livros.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for Protocol schemes: http, data, Chrome, Chrome-Extension, https.

I’ve been doing some research but I haven’t been able to solve this problem, I’ve never come across this error before. What is the cause of this error ? how to resolve ?

Answer 1

If you’re using Chrome, this is a known bug from Chrome itself:

Link: https://bugs.chromium.org/p/chromium/issues/detail?id=40787&q=ajax%20local&colspec=ID%20Stars%20Pri%20Area%20Feature%20Type%20Status%20Summary%20Modified%20Owner%20Mstone%20OS

Try running Firefox or another browser, or use a webserver, like http-server.

Link to an English thread about this: https://stackoverflow.com/questions/8533078/getjson-not-working-with-local-json-file

Answer 2

I tested your function and worked normally Levi, but I made an AJAX call so you can test

$.ajax({
            type: "GET",
            url: './dados/livros.json',
            dataType: 'json',
            success: function (jsonDadosRetorno) {
                console.log(jsonDadosRetorno);
            },
            error: function () {
            }
        }); 

Another option by placing . / in its relative path

$.getJSON('./dados/livros.json', function(data){
console.log(data);