CORS ERRORs - http://localhost:8080 has been blocked by CORS policy

[samirissa00]

Ola , alguma coisa mudou :? Estava usando até pouco tempo no dev local sem problemas , mas agora dá erro >>

localhost:8080/#/pensionistas/detalhe_pensionista/090d6653-9a71-43f4-b1e9-1cf2f2b7739c/enderecos_pensionista:1 Access to XMLHttpRequest at 'https://viacep.com.br/ws/04736-001/json' from origin 'http://localhost:8080' has been blocked by CORS policy: Request header field authorization is not allowed by Access-Control-Allow-Headers in preflight response.

[lucianopf]

Bom dia, o estranho é não estar usando o proxier no front :thinking:

Algo foi alterado no processo de build? Qual o bundler que vc ta usando?

[samirissa00]

Ola , desculpe a demora , mas só estou usando só url do proxy não fiz nada diferente !! Não pode usar assim ? Como estou usando Vue não quis misturar 👍

  getCEP: {
    method: "get",
    url: "https://proxier.now.sh/api?url=https://viacep.com.br/ws{/id}/json"
    //url: "https://viacep.com.br/ws{/id}/json"
  }

uso assim ! Mas posso usar no backend se ajuda !

[lucianopf]

@samirissa00 testei aqui e ta funcionando direitinho sim :thinking: , veja aqui https://proxier.now.sh/api?url=https://viacep.com.br/ws/29090010/json

Tenho 2 pontos:

1 - Na sua URL tem uma coisiha estranha, o {/id} a barra ta dentro das chaves, é assim mesmo? 2 - Se não me engano quando o serviço responde alguns tipos de falha ele explode pro proxy como problema de CORS mas as vezes é só problema na request pro serviço msm =/

[samirissa00]

1 - Na sua URL tem uma coisiha estranha, o {/id} a barra ta dentro das chaves, é assim mesmo? SIM É ASSIM VUE RESOURCE usa esta sintax !

2- Vou verificar !

No backend seria mais improvavel ter este erro , para o Browser , correto ? Ai só elimino o problema de CORS.... Obrigado vou fazer um alteração para não ter mais este tipo de problema no Browser ai quando der algum erro volta erro generico para o usuario.

[diegospm]

Eu tive o mesmo problema usando a versão do browser, porém o erro vinha do Correio.

Usando dessa forma (resumidamente):

<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/cep-promise/dist/cep-promise-browser.min.js"></script>

const postcode = $('#postcode').val();

cep(postcode).then(function(response) {
    $.each(response, function(key, data) {
        $('#' + key).val(data);
     });
});

[victor-tinoco]

Opa, também estou tendo esse problema. Tentei utilizar tanto a browser quanto a normal (aliás, não sei a diferença de uma pra outra, se alguém puder tirar essa dúvida também) e nenhuma das duas retornam sucesso. Ambas retornam um erro de CORS e aponta vir do Correio. Daí ele retorna como se todos os serviços retornassem erro, porém já testei por exemplo o ViaCep e o mesmo segue normal.

[lucianopf]

Gente, o erro do CORS ta acontecendo apenas em um provedor, correto? O cep está sendo resolvido, correto?

Só pra entender o nível de critícidade.

Eu to estudando mudar um pouco como buscamos CEP no browser pra quem sabe usar o BrasilAPI direto, que além de fugir do CORS a gnt tbm consegue cache :thinking:

Vcs tem alguma opinião sobre isso?

[diegospm]

@lucianopf Sim, no meu caso o cep foi resolvido com a viacep, com exceção se estiver usando o firefox.

@victrmart a diferença é a forma como você vai "instanciar" a biblioteca para usar no seu projeto. Muitos usuários utilizam outras linguagens no backend e fazem a requisição de libs de js no front, como jquery, entre outras. Dai a necessidade de uma versão para o browser...

Sobre usar a BrasilAPI, fiz um teste rápido aqui e ela respondeu extremamente rápido, mas qual seria a implicação/desvantagem de usar ela? Vi que é um projeto que está em fase inicial, seria esse o impeditivo?

Valeu @lucianopf

[victor-tinoco]

Bacana @diegospm, valeu! Na realidade essa questão do browser é meu caso então: estou desenvolvendo um site simples institucional, com bootstrap e etc. Depois me surgiu a necessidade de fazer autopreenchimento a partir do cep, implementei tudo com jquery somente com a api da viaCep, mas gostaria muito de usar essa lib que acaba integrando várias, pra ficar mais redonda e evitar depender de um endpoint só. Pena que está retornando esse problema com o CORS :/

[lucianopf]

Boa @diegospm

É um projeto ainda novo, com vários benefícios mas ainda não foi muito estressado, talvez a própria lib do cep-promise pudesse ser esse teste :thinking:

Hoje o front faz 3 requisições, um pra cada provedor, nesse caso seria só 1 requisição. A gnt ganha com cache, adiciona 1 request a mais no fluxo, afinal é 1 pra API e mais 3 internas e isso deve adicionar alguns poucos milisegundos na request. Se torna também um ponto central de falha MAS como ta com a CDN na frente tende a ser menos perceptível :thinking:

[diegospm]

@victrmart sim sim, a maioria dos projetos ainda rodam como o seu e sua preocupação com disponibilidade é importante. Essa api que o @filipedeschamps, @lucianopf e toda comunidade desenvolveu é incrível, pois contorna esse problema para nós!

Pena dependermos de serviços tão arcaicos do governo que com todo o aparato que tem não consegue atualizar seus serviços para uma coisa mais moderna como o REST.

Sobre usar BrasilAPI, concordo contigo @lucianopf como a própria cep-promise trabalha com concorrência no consumo dos serviços, usar a BrasilAPI como um tipo de proxy seria mais interessante, até porque o fato de usar essa CDN da Vercel com cache e tudo mais deixa o serviço ainda mais poderoso!

[lucianopf]

GALERA GALERA 😱 @samirissa00 @victrmart @diegospm

Testem pfv novamente 🙏 🙏

Fiz altas correções no proxier, especialmente agora que mudou pra Vercel o parse do req.body parou de funcionar se o content-type for xml.

Acho que finalmente voltamos a parar de ter o erro de CORS constantemente! 😱 🎉 🙏

[samirissa00]

@lucianopf Testei aqui e está OK !! no cliente agora !! Acho que funcionou !!

[diegospm]

@lucianopf desculpe a demora no retorno.

Testei aqui também e sem erros! \o/ obrigado pela correção!

[filipedeschamps]

Feito o merge da branch 4.0.0 com todas essas correções 👍