Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Acesso a API bloqueada pelo CORS

Referente ao curso React parte 1: componentes reutilizáveis para sua webapp, no capítulo Consumindo a API e dando vida a nossa listagem e atividade Mão na massa: Implementação da listagem dinâmica

por Joaquim Silveira Mello Filho
| 97.8k xp | 67 posts
tentando ser full stack

Criei um backend em utilizando o node.js, porém quando a aplicação react tenta acessá-lo aparece a seguinte mensagem no console do navegador.

Access to XMLHttpRequest at 'http://localhost:8080/api/autores' from origin 'http://localhost:3000' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource.

Se altero para utilizar a api disponibilizada em https://cdc-react.herokuapp.com/api/autores a aplicação react roda com sucesso.

O que é esse erro no navegador quando tento acessar a minha api pela aplicação react?

1 resposta
solução!
por Joaquim Silveira Mello Filho
| 97.8k xp | 67 posts
tentando ser full stack

Consegui resolver!

Pelo o que eu entendi, devido a uma política de segurança utilizada pelos navegadores (Same Origin Policy), não é permitido a aplicação chamar um servidor que não seja da mesma origem. Ou seja, a aplicação, que roda na porta 3000, não consegue chamar o servidor que roda na porta 8080.

Para resolver, precisei configurar no meu servidor outras origens, adicionando um cabeçalho na resposta HTTP (CORS - Cross-Origin Resource Sharing).

Então, na configuração do Express no meu servidor em Node.js, inseri o seguinte código:

app.use(function(req, res, next) {
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});