0

Estou tentando carregar dados de um arquivo json em uma tabela html.

Estou tentando resgatar o json desta forma:

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

Exemplo do json que estou tentando resgatar:

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

Localização do arquivo json:

inserir a descrição da imagem aqui

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.

Já estou a algum tempo pesquisando mas ainda não consegui solucionar este problema, nunca tinha me deparado com este erro antes. Qual é a causa este error ? como resolver ?

1

2 Respostas 2

1

Se você tiver usando o Chrome, esse é um bug conhecido do próprio Chrome:

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

Tente rodar no Firefox ou outro navegador, ou use um webserver, tipo http-server.

Link para um thread em inglês sobre isso: https://stackoverflow.com/questions/8533078/getjson-not-working-with-local-json-file

0

Testei a sua função e funcionou normalmente Levi, porém fiz uma chamada AJAX para que possa testar

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

Outra opção colocando o ./ no seu caminho relativo

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

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .