Olá pessoal tudo bem? Pois bem eu estou fazendo um trabalho do curso e na hora de receber os dados da api esta dando o seguinte erro:
Failed to load http://www.superheroapi.com/api/2195914800646269/search/batman: Redirect from 'http://www.superheroapi.com/api/2195914800646269/search/batman' to 'https://www.superheroapi.com/api.php/2195914800646269/search/batman' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'null' is therefore not allowed access.
Eu já vi varias resoluções acerca desse erro, mas nenhuma conseguiu corrigir. Quem puder me ajudar eu agradeço!!
segue o javascript:
window.onload = function(){
var nome = this.queryString("nome");
var table =document.getElementById("tab");
var element = document.getElementById('element');
var power = document.getElementById('power');
var tbody = document.getElementById("tbo");
var request = new XMLHttpRequest();
request.open('GET', 'http://www.superheroapi.com/api/2195914800646269/search/' + nome , true);
request.onload = function () {
// Vary= Origin;
var data = JSON.parse(this.response);
if (request.status >= 200 && request.status < 400) {
tbody.innerHTML="";
element.innerHTML +="<h2>resultados para " +nome+"</h2>";
power.innerHTML +="Resultados para " +nome;
try {
for(var i=0; i<=data.results.length; i++){
tbody.innerHTML += "<tr><td> <center><img src=" +data.results[i].image.url + " class='imgherois'></center>" +
"<tr><td>"+"Nome: " +data.results[i].name +
"<tr><td>"+ "Nome Real: " +data.results[i].biography["full-name"] +
"<tr><td>"+ "Alter-Ego: " +data.results[i].biography["alter-egos"] +
"<tr><td>"+ "Aliados: " +data.results[i].biography.aliases +
"<tr><td>"+ "Naturalidade: " +data.results[i].biography["place-of-birth"] +
"<tr><td>"+ "Apareceu pela primeira vez em: " +data.results[i].biography["first-appearance"] +
"<tr><td>"+ "Universo: " +data.results[i].biography.publisher +
"<tr><td>"+"Do Bem ou do Mau: " +data.results[i].biography.alignment+
"<tr><td>"+"Inteligencia: " + "<div class='porcentagem porc'><div class='por cor porc' + style=width:"+data.results[i].powerstats.intelligence+"%>"+data.results[i].powerstats.intelligence+"</div></div>"+
"<tr><td>"+"Força: "+ "<div class='porcentagem porc'><div class='por cor porc' + style=width:"+data.results[i].powerstats.strength+"%>"+data.results[i].powerstats.strength+"</div></div>"+
"<tr><td>"+"Velocidade: "+ "<div class='porcentagem porc'><div class='por cor porc' + style=width:"+data.results[i].powerstats.speed+"%>"+data.results[i].powerstats.speed+"</div></div>"+
"<tr><td>"+"Durabilidade: "+ "<div class='porcentagem porc'><div class='por cor porc' + style=width:"+data.results[i].powerstats.durability+"%>"+data.results[i].powerstats.durability+"</div></div>"+
"<tr><td>"+"Poder: "+ "<div class='porcentagem porc'><div class='por cor porc' + style=width:"+data.results[i].powerstats.power+"%>"+data.results[i].powerstats.power+"</div></div>"+
"<tr><td>"+"Combate: "+ "<div class='porcentagem porc'><div class='por cor porc' + style=width:"+data.results[i].powerstats.combat+"%>"+data.results[i].powerstats.combat+"</div></div>"+
"<tr><td>"+"Genero: " +data.results[i].appearance.gender+
"<tr><td>"+"Raça: " +data.results[i].appearance.race+
"<tr><td>"+"Altura: " +data.results[i].appearance.height+
"<tr><td>"+"Peso: " +data.results[i].appearance.weight+
"<tr><td>"+"Cor dos Olhos: " +data.results[i].appearance["eye-color"]+
"<tr><td>"+"Cor dos Cabelos: " +data.results[i].appearance["hair-color"]+
"<tr><td>"+"Oucupação: " +data.results[i].work.occupation+
"<tr><td>"+"Base: " +data.results[i].work.base+
"<tr><td>"+"Afiliação: " +data.results[i].connections["group-affiliation"]+
"<tr><td>"+"Parentes: " +data.results[i].connections.relatives+"</td></tr>";
}
} catch (e) {
//console.log(e);
if (data.results == null) {
tbody.innerHTML += "<tr><td>"+"O Herói ou Vilão não foi encontrado!!! =("+"</td><td>";
}
return undefined;
}
} else {
console.log('error');
}
}
request.send();
}
// função pra ler querystring
function queryString(parameter) {
var loc = location.search.substring(1, location.search.length);
var param_value = false;
var params = loc.split("&");
for (i=0; i<params.length;i++) {
param_name = params[i].substring(0,params[i].indexOf('='));
if (param_name == parameter) {
param_value = params[i].substring(params[i].indexOf('=')+1)
}
}
if (param_value) {
return param_value;
}
else {
return undefined;
}
}