0

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;   
              }   
        }

2
  • tente usar um extensão no navegador chrome.google.com/webstore/detail/allow-control-allow-origi/… Commented 7/11/2018 às 23:53
  • Ao meu ver, esse problema é em relação ao serviço da API que você está a utilizar, basicamente esta dizendo que você não tem permissão de utilizar esse serviço. Não tem nada a ver com seu javascript, e sim com o backend desse serviço 'superheroapi' Commented 8/11/2018 às 11:38

3 Respostas 3

0

Bem vindo ao Stack Overflow em Português, Matheus. Dê uma olhada na central de ajuda caso tenha alguma dúvida sobre o site.

Nesta linha:

request.open('GET', 'http://www.superheroapi.com/api/2195914800646269/search/' + nome , true);

Tente trocar para:

request.open('GET', 'http://www.superheroapi.com/api.php/2195914800646269/search/' + nome , true);

Aparentemente, há um problema com o redirect que a API está fazendo enviando o status 302, e nesse redirect alguma coisa (não consigo te dizer exatamente o que é) com a política de CORS.

Mas funciona, como pode ser visto aqui: https://jsfiddle.net/adrianprado/jw5bgred/9/

2
0

Uma definição do que esta acontecendo

Segurança do navegador impede que uma página da web fazendo solicitações para um domínio diferente daquele que atendia a página da web. Essa restrição é chamada de política de mesma origem. A política de mesma origem impede que um site mal-intencionado leia dados confidenciais de outro site. Às vezes, você talvez queira permitir que outros sites fazem solicitações entre origens em seu aplicativo.

Entre o compartilhamento de recursos de origem (CORS) é um padrão W3C que permite que um servidor relaxar a política de mesma origem. Usando o CORS, um servidor pode explicitamente permitir algumas solicitações entre origens enquanto rejeita outras.

fonte:https://docs.microsoft.com/pt-br/aspnet/core/security/cors?view=aspnetcore-2.1

seu problema provavelmente e na Api qual esta sendo feita a requisição pode dar uma olhada de como habilitar CORS na sua api para poder ela permitir as requisições.

0

Acredito que o problema não seja "Access-Control-Allow-Origin", fiz um exemplo aqui e não me mostrar este erro, na verdade esta api não tem acesso para consulta externa

var xhr = new XMLHttpRequest();
var nome = "";
xhr.open("GET","http://www.superheroapi.com/api.php/2195914800646269/search/" + nome , true);
xhr.send(null);

xhr.onreadystatechange = function(){
    if(xhr.readyState === 4){
        console.log(JSON.parse(xhr.responseText));
    }
}

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 .