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

Requisição ao servidor recusada

Não sei o que aconteceu. Até ontem tudo estava funcionando, até o fim da aula anterior. Hoje liguei o computador e inicializei tudo (incluindo o npm start na pasta do servidor):

D:\Documentos\Profissionais\Cursos\alura-typer\servidor>npm start

AluraTyper@1.0.0 start D:\Documentos\Profissionais\Cursos\alura-typer\servidor node server

consign v0.1.2 Initialized in app

  • .\api\frases.js
  • .\api\placar.js
  • .\routes\frases.js
  • .\routes\placar.js Banco data.db pronto para uso Servidor iniciado

Mas quando faço requisição nos botões da página para carregar uma página aleatória ou selecionar uma página pelo id recebo os respectivos erros na console:

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

Se chamo a URL pelo browser (http://localhost:3000/frases) a página coma as frases carrega normalmente.

Código das requisições:

$('#botao-frase').click(fraseAleatoria); $('#botao-frase-id').click(buscaFrase);

function fraseAleatoria () { $('#spinner').toggle(); $.get('http://localhost:3000/frases', trocaFraseAleatoria) .fail (erroServidor) .always (paraSpinner); };

function trocaFraseAleatoria (frasesRetornadas) { var frase = $('.frase'); var numeroAleatorio = Math.floor (Math.random() * frasesRetornadas.length); frase.text(frasesRetornadas[numeroAleatorio].texto); atualizaTempoInicial (frasesRetornadas[numeroAleatorio].tempo); atualizaTamanhoFrase(); }

function buscaFrase () { var fraseId = $('#frase-id').val(); var idEscolhido = { id: fraseId }; $('#spinner').toggle(); $.get('http://localhost:3000/frases', idEscolhido, trocaFrase) .fail (erroServidor) .always (paraSpinner); }

function trocaFrase (fraseSelecionada) { var frase = $('.frase'); frase.text(fraseSelecionada.texto); atualizaTempoInicial (fraseSelecionada.tempo); atualizaTamanhoFrase(); }

function erroServidor() { $('#erro').toggle(); setTimeout (function() { $('#erro').toggle(); },3000); }

function paraSpinner () { $('#spinner').toggle(); }

4 respostas

O evento relatado no post anterior regere-se ao navegador Chrome. No Firefox a mensagem de erro é:

Requisição cross-origin bloqueada: A política de mesma origem (Same Origin Policy) impede a leitura do recurso remoto em http://localhost:3000/frases. (Motivo: o cabeçalho CORS 'Access-Control-Allow-Origin' não está presente).

Fala ai Sergio, tudo bem? Como você está subindo o front? Certifique-se que após o npm start você foi no seguinte link: http://localhost:3000/principal.html

O mesmo está no mesmo dominio da API, sendo assim, não vai ter problema de CORS.

Espero ter ajudado.

solução!

Perfeito! "Problema" resolvido. Valeu, Matheus, pela resposta e rapidez.

Magina Sergio, sempre que precisar não deixe de criar suas dúvidas.

Abraços e bons estudos.