Javascript O CORS Policy me impede de acessar minha própria API com JS

[Visitante]

Eu criei uma API de endereços e não consigo obter eles com JS!

A API rest está hospedada na plataforma heroku.com

Meu código JS deveria funcionar... eu estou tentando acessar da minha propiá Maquina onde estou começando a desenvolver mas parei nesse ponto.

const cep = document.querySelector("#cep")

cep.addEventListener("blur", (e)=>{
	let search = cep.value.replace("-","-")
	const options = {
		method: 'GET',
		mode: 'cors',
		cache: 'default'
	}
	fetch(`https://addressapiby.herokuapp.com/address/cep?cep=${search}`, options)
	.then(response =>{ response.json()
		.then(data => console.log(data))
	})
	.catch(e => console.log('Error'+e.message))
})

 

[Rui Guilherme]

Bom, duvido que seja o caso mas você checou se o method está correto na definição da rota?

 

Porém acredito que a melhor solução seja checando as configurações do Cors, como a aplicação está rodando no heroku eu chuto que seu back-end é feito em nodejs... então talvez isso te ajude: https://www.npmjs.com/package/cors

 

Dica: Você pode facilmente dar bypass no cors, existem muitas extensões para os navegadores que fazem isso, você também pode fazer sua própria versão do cors anywhere ou montar sua própria API para cosumir a api... Lembra-se que cors só existe no navegador.

[Adriano_web]

@Rui Guilherme Isso acontece aqui quando eu tento testar o uso de Ajax, eu baixei um aplicativo para meu Google Chrome chamado "Web Server for Chrome", ele vai disponibilizar para você um endereço de um servidor web quando você escolher a pasta que está seu arquivo, pode ajudar.

[Rui Guilherme]

@Adriano_web Talvez seja necessario configurar e/ou ativar o COR's em "opções avançadas", já tentou isso?

[Visitante]

@Rui Guilherme A aplicação foi construida em JAVA com Spring.

[Adriano_web]

@Rui Guilherme Eu não achei essa opção amigo, dei uma pesquisada no Google, mas só extensões disponíveis como a que eu utilizo são mostradas para instalar.

[Rui Guilherme]

@felipe honorio  Existe uma documentação sobre CORS com Spring; Cors é uma proteção que existe APENAS nos navegadores, mas as configurações do CORS são feits do lado do servidor (não do cliente), então seu back-end está com as configurações erradas... Eu não manjo de Spring, se não poderia tentar te ajudar.

 

Para ter certeza você pode tentar fazer uma request pelo Postman que não possue o CORS e consegue fazer request em API's com essa proteção, esse aplicativo talvez te ajude a ver onde está o problema.

[Visitante]

@Rui Guilherme Com o POSTMAN dá tudo certo, com PHP também, mas eu gostaria de usar JS para isso.
Qual outra tecnologia poderia contornar esse problema? Considerando que quero criar algo funcional para um usuário. 

[Rui Guilherme]

@felipe honorio Novamente: CORS é uma proteção que existe apenas no navegador, o código JavaScript depende do motor do navegador para ser interpretado e executado por isso quando você faz uma "request" pelo navegador, essa request é bloqueada pelo navegador caso as Origins sejam diferentes.

PHP roda do lado do servidor, então ele consegue dar bypass no CORS.

O mesmo para o Postman, ele também da bypass no CORS.

 

Vou tentar deixar mais claro com alguns exemplos:

 

Fetch usando no-cors:

 

Como você pode ver, ele retorna um "opaque", isso é basicamente o navegador falando para você "Boa tentativa, mas não!"

 

Fetch usando Cors:

 

Esse resultado é seu navegador falando "Ok, ok! Você provavelmente não deveria estar fazendo isso!"

 

Então isso é uma limitação do JavaScript? NÃO!

 

Fiz esse exemplo dentro do NodeJS(Usando ExpressJS) e assim como o PHP e o Postman o NodeJS ignora o CORS, e como você pode ver ele me retornou "200" como status mesmo usando ' mode: "cors" '

 

Tá, o que isso quer dizer? As configurações de CORS dentro do seu back-end em Spring estão faltando ou estão bloqueando a origin de onde você está fazendo a request e como eu não manjo nada de Spring fica complexo te ajudar...

 

A única coisa que eu posso recomenda é que você pesquise um pouco de como o Spring trabalha com CORS, talvez isso resolva seu problema...