Entrar Ainda não tem acesso?
Solucionado (ver solução)
Solucionado
(ver solução)
4
respostas

Integração com Angular 2

Referente ao curso Node.js: Inovando com Javascript no backend, no capítulo Content negotiation e atividade Suportando JSON no cadastro

por Yuri Bett
| 133.4k xp | 26 posts

Olá, criei um projeto Angular2 para consumir a API de produtos do node. Porém tive um problema de permissão de acesso. Não sei se o problema está na disponibilidade do Node ou na restrição do Angular.

Tentei obter da seguinte forma:

http.get('http://localhost:3000/produtos').subscribe(
        produtos => console.log(produtos),
        error => console.log(error)
      );

No console log obtive o seguinte erro:

XMLHttpRequest cannot load http://localhost:3000/produtos. 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:4200' is therefore not allowed access.

Lembro de ter visto isso no curso de Cordova, para permitir consumir serviços externos, mas era uma configuração no próprio xml do Cordova.

Garanta sua matrícula hoje e ganhe + 2 meses grátis

Continue sua jornada tech com ainda mais tempo para aprender e evoluir

Quero aproveitar agora
4 respostas
por JOAO JOSE MARANHAO JUNIOR
| 675.9k xp | 98 posts

Olá Yuri nclua isto em seu response:

app.use(function(req, res, next) {
  res.header("Access-Control-Allow-Origin", "http://localhost:3000, http://192.168.0.83:3000");
  res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
  next();
});

No curso de JQuery Parte 2 é explicado com detalhes do Same origin Policy e CORS.

solução!
por Yuri Bett
| 133.4k xp | 26 posts

Exatamente dessa forma acabou não funcionando, mas verificando os erros e realizando os ajustes informados, fiz funcionar com o seguinte código na configuração do meu express:

    app.use(function(req, res, next) {
        res.header("Access-Control-Allow-Origin", "http://localhost:4200");
        res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, X-XSRF-TOKEN, Content-Type, Accept");
        next();
    });

Mudei pra localhost:4200, que é onde minha aplicação está rodando. e adicionei X-XSRF-TOKEN no header.

Faz sentido isso?

por JOAO JOSE MARANHAO JUNIOR
| 675.9k xp | 98 posts

Isso só foi um exemplo, mesmo porque eu não sei o seu IP e nem a Porta que você esta subindo o seu servidor, que bom que seu certo.

Por favor feche o tópico, um abraço!

por JOAO JOSE MARANHAO JUNIOR
| 675.9k xp | 98 posts

Você solucionou a sua própria dúvida? A minha dica não te ajudou?