-2

estou realizando um exercicio de front-end, e quero que meu script pegue os dados que estão no arquivo .json e passe eles para o html, desta forma o javascript vai criar divs dinamicamente atraves das informações dadas no .json. bom, localmente funciona, mas quando subo para o gith da esse erro:

  index.html:1 Access to XMLHttpRequest at 'file:///C:/Users/ESPA%C3%87O%20FIT/Downloads/results-summary-component-main/data.json' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.
sript.js:6 
         
       GET file:///C:/Users/ESPA%C3%87O%20FIT/Downloads/results-summary-component-main/data.json net::ERR_FAILED
(anonymous) @ sript.js:6

esse é meu codigo javascript: script.js

var urlrequisicao = 'data.json';
var request = new XMLHttpRequest();
request.open("GET", urlrequisicao,true);
request.responseType = 'json';
request.send();
var contenthtml = " ";

function scoreDoObjeto(){
    request.onload = function(){
    var resposta = request.response;
    

    for(var i = 0;i < resposta.Dados.length; i++){
        var name = resposta.Dados[i].category;
        var number = resposta.Dados[i].score;
        var icone = resposta.Dados[i].icon;
        var cor = resposta.Dados[i].color;
         contenthtml += "<div id='Reaction' style='color:"+cor+"'><img src="+icone+">"+name+"<span id='numbers' style='color:black;font-weight: 600'>"+number+"<rest style='opacity:0.7'>/100<rest></span></div>"   

    }
    
    $("#Reaction").replaceWith(contenthtml)
}}

scoreDoObjeto()

esse é o arquivo .json: data.json

"Dados": [
  {
    "category": "Reaction",
    "score": 90,
    "icon": "./assets/images/icon-reaction.svg",
    "color" : "hsl(0, 100%, 67%)"
  },
  {
    "category": "Memory",
    "score": 92,
    "icon": "./assets/images/icon-memory.svg",
    "color" : "hsl(39, 100%, 56%)"
  },
  {
    "category": "Verbal",
    "score": 61,
    "icon": "./assets/images/icon-verbal.svg",
    "color" : "hsl(166, 100%, 37%)"
  },
  {
    "category": "Visual",
    "score": 72,
    "icon": "./assets/images/icon-visual.svg",
    "color" : " hsl(234, 85%, 45%)"

  }
  
]
    }

Pelo vscode ultilizando o live server tudo roda normalmente, mas quando vou testar no gith, ou ate mesmo entrando no html pelo chrome, ele da esse erro, se alguem puder me ajudar, eu agradeço muito!!

3
  • 2
    Sempre utilize um servidor web, nunca acesse conteúdo local com file:///. Esse protocolo não permite requisições ajax, entre outras limitações.
    – bfavaretto
    Commented 23/10/2023 às 15:12
  • No caso qual seria a melhor forma para eu fazer isso?, criar um servidor apartir do node.js? Estou bastante perdido quanto a isso Commented 23/10/2023 às 15:14
  • Essa é uma opção. Outras são pacotes como o XAMPP, ou instalar um servidor web como apache na sua máquina manualmente, ou o próprio IIS da Microsoft. Ou sempre testar com o live server do seu editor mesmo.
    – bfavaretto
    Commented 23/10/2023 às 17:02

2 Respostas 2

-4

Isto parece que necessita de ler um ficheiro e não apenas a json strings or arrays, e para ler um ficheiro com javascript pode ser feito desta forma


// Defina o URL do ficheiro JSON
const jsonFileURL = 'data.json';

// Utilize a API fetch para fazer um pedido HTTP ao ficheiro JSON
fetch(jsonFileURL)
  .then(response => {
    if (!response.ok) {
      throw new Error(`Erro HTTP! Estado: ${response.status}`);
    }
    return response.json(); // Analise a resposta como JSON
  })
  .then(data => {
    // Agora, 'data' contém os dados JSON analisados a partir do ficheiro
    console.log(data);

    // Pode trabalhar com os dados JSON aqui
    // Por exemplo, pode aceder a propriedades como data.nomeDaPropriedade
  })
  .catch(error => {
    console.error('Erro ao ler o ficheiro JSON:', error);
  });

onde tem console.log(data); pode ser substituido pelo código que entender, data é assim a variável com o conteúdo do ficheiro

-4

Isso acontece porque seu navegador bloqueia que os sites acessem qualquer arquivo que esta dentro do seu PC, por uma questão de segurança.

Se você precisa acessar esse arquivo, deve coloca-lo na mesma pasta do script

1
  • 1
    Como está escrito atualmente, sua resposta não é clara. Por favor, pode editar para adicionar mais detalhes, que ajudarão outras pessoas a entender como isso resolve a pergunta feita. Você pode encontrar mais informações sobre como escrever boas respostas na Central de Ajuda.
    – Comunidade Bot
    Commented 29/08 às 21:17

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 .