Acesso a API bloqueada pelo CORS | React parte 1: componentes reutilizáveis para sua webapp

Solucionado (ver solução)

Solucionado
(ver solução)

1
resposta

por Joaquim Silveira Mello Filho

| 89.1k xp | 66 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

| 89.1k xp | 66 posts

tentando ser full stack

11/07/2019

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();
});