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!!
file:///
. Esse protocolo não permite requisições ajax, entre outras limitações.