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

Erro 'Access-Control-Allow-Origin'

Boa tarde, tentei comunicar o react com uma api q tem na minha maquina, quando chamo api no navegador ela responde normalmente, mas quando chamo via react tenho a seguinte mensagem

Failed to load http://localhost:8080/teste/Autores/: Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:3000' is therefore not allowed access. The response had HTTP status code 403.


componentWillMount(){
  $.ajax({
      url:"http://localhost:8080/teste/Autores/",
      crossDomain: true,
      type: "GET",
      headers: {"X-API-KEY": "_KEY_"},
      dataType: 'json',
      success:function(resposta){
            console.log(resposta);
            this.setState({lista:resposta});
          }
      }
    );
}
5 respostas

Rafael, essa API você quem fez? Ela tem algum tipo de controle de acesso, definido pelo header Access-Control-Allow-Origin. Inclua esse header na sua requisição e tente novamente:

headers: {"X-API-KEY": "__KEY__", "Access-Control-Allow-Origin": "true"}

Escrevi true no valor do header mas você deve ter que descobrir qual o valor adequado.

Olha, parece que minha suposição está certa mas a solução errada. Li um pouco sobre o Access-Control-Allow-Origin e ele parece barrar requisições que venham do mesmo endereço que o servidor.

Uma solução sugerida no stackoverflow foi fazer um atalho do seu endereço local pra outro nome. Está usando Mac ou Linux?

Confira seu arquivo /etc/hosts e veja se tem algo como

127.0.0.1    localhost

Se não tiver, adicione, reinicie e tente novamente.

Ola Marcos, estou usando Windows e a api nao te nada implementado sobre os headers. vou tentar ver onde mudo isso no windows e respondo aqui. Foi eu mesmo que fiz a api ela foi desenvolvido em java usando spring boot.

Bom dia Marcos, a solução que você propôs não funcionou aqui. Consegui uma solução alternativa que foi instalar um plugin do Chrome chamado 'Access-Control-Allow-Origin'. Isso permitiu que meus teste continuassem. Mas ainda tenho que ver uma solução definitiva pois a api e o site vão rodar na mesma máquina.

solução!

Bom dia Rafaels,

Se a API e o site vão rodar na mesma máquina em um servidor em nuvem, tente utiliza um sistema linux para tal, assim deve conseguir resolver definitivamente.

Essa resposta do Stack parece também ser uma alternativa válida: https://stackoverflow.com/a/43476545

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software