Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Configurar o Header da solicitação - Bloqueio de CORS

Bom dia pessoal, após finalizar este curso, resolvi fazer um exercicio para treinar o conceito de consumo de dados externos atravez de requisições AJAX. (Inclusive tirei esta ideia de um post aqui da Alura onde o instrutor faz o mesmo projeto https://www.alura.com.br/artigos/preenchendo-formulario-html-automaticamente-com-ajax).Sou novato, então me desculpem se estiver falando besteira aqui.

Estou fazendo uma pagina para consulta de CEP, atravéz da API https://viacep.com.br/, porém minha requisição está sendo bloqueada devido a politica de origem cruzada, o CORS. Eu já entendi o conceito do cors e entendi também que preciso configurar o cabeçalho da requisição com o "Access-Control-Allow-Origin" e a origem que pode acessar as informações da API. O problema é que já vasculhei a internet tentando descobrir como eu configuro o cabeçalho, incluindo esta informação no mesmo, mas, só acho explicações de para que serve e nunca o "como fazer" na pratica mesmo, tipo, devo criar um novo arquivo? Qual extenção utilizar? coisas bem simples mas que alguem novo na area como eu não tem muita noção de como fazer.

Tentei desta forma, com o setRequestHeader() mas não funcionou. Já adianto que sei que não é legal utilizar o * , porém, como é um projetinho apenas para exercitar estou abrindo esta excessão.

function ZipConsultation(){ 
  const inputZipCode = document.querySelector('#form__zip-code').value;
  const zipCode = inputZipCode.replace("-", "");

  const url = 'https://viacep.com.br/'+ zipCode +'/json/';  
  const xhr = new XMLHttpRequest();
  xhr.open('GET', url);  
  xhr.setRequestHeader("Access-Control-Allow-Origin", "*");

xhr.onreadystatechange = function(){
  if(xhr.readyState == 4){
  if(xhr.status == 200){
    console.log(xhr.responseText);
    }
  }     
}
xhr.send();
}

HTML

<!DOCTYPE html>
<html lang="pt-br">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">

  <link rel="stylesheet" href="assets/css/normalize.css">
  <link rel="stylesheet" href="assets/css/base.css">
  <link rel="stylesheet" href="assets/css/form.css">

  <title>Consulta CEP</title>
</head>
<body>
  <main>
    <section>
      <form action="" class="form__container">
        <legend class="form__title">Consulta CEP</legend>

        <label for="form__zip-code" class="form__label label__zip-code">Digite o CEP:</label>
        <input type="number" class="form__input form__zip-code" id="form__zip-code" value="13990000">

        <button class="form__button" id="form__button" type="button" onclick="ZipConsultation()">Consultar CEP</button>

        <label for="form__street" class="form__label label__street">Logradouro:</label>
        <input type="text" class="form__input form__street" id="form__street">

        <label for="form__number" class="form__label label__number">Numero:</label>
        <input type="text" class="form__input form__number" id="form__number">        

        <label for="form__district" class="form__label label__district">Bairro:</label>
        <input type="text" class="form__input form__district" id="form__district">

        <label for="form__complement" class="form__label label__complement">Complemento:</label>
        <input type="text" class="form__input form__complement" id="form__complement">

        <label for="form__city" class="form__label label__city">Cidade:</label>
        <input type="text" class="form__input form__city" id="form__city">

        <label for="form__state" class="form__label label_state">Estado:</label>
        <input type="text" class="form__input form__state" id="form__state">

      </form>
    </section>
  </main>

  <script src="assets/javascript/index.js"></script>

</body>
</html>

Desde já, agradeço aqueles que se dipuseram a me auxiliar.

Edit 1: Estou usando JavaScript, sem backend, apenas HTML, CSS e JS. Link do repositório no GITHUB: https://github.com/LuizFelipeSacardo/consulta-cep Link da pagina no GITHUB Pages: https://luizfelipesacardo.github.io/consulta-cep/

2 respostas
solução!

Olá, Luiz, tudo bem?

Nos desculpe a demora a responder.

Na verdade o único problema da sua requisição foi a URL que você solicitou, que não é válida: const url = 'https://viacep.com.br/'+ zipCode +'/json/';

Assim como no artigo que você citou, a URL deve ser assim, com /ws/ antes do zipCode: const url = 'http://viacep.com.br/ws/' + zipCode + '/json';

Depois de arrumar isso, você também deve remover a linha xhr.setRequestHeader("Access-Control-Allow-Origin", "*");, senão não funcionará.

Espero ter ajudado! Abraços e bons estudos :)

Funcionou! muito obrigado pelo apoio.