1
resposta

XMLHttpRequest at 'http://localhost:3000/frases'

Boa tarde, tudo bem?

Estou tendo o seguinte erro:

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.

GET http://localhost:3000/frases net::ERR_FAILED

Já reiniciei o servidor duas vezes, conferi o código mais de uma vez e nada.

$("#botao-frase").click(fraseAleatoria);

function fraseAleatoria() {
    $.get("http://localhost:3000/frases", trocaFraseAleatoria)
        .fail(function () {
            $("#erro").toggle();
            setTimeout(function () {
                $("#erro").toggle();
            }, 2000);
        });
}

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

Oi João!

Para que tudo funcione corretamente, é necessário que você abra o AluraTyper pela URL http://localhost:3000/principal.html depois de iniciar o servidor.

Imagem mostrando a URL localhost:3000/principal.html e o programa funcionando corretamente

Por padrão, os servidores que criamos não aceitam requisições de outros endereços além do próprio. Neste caso, o servidor é inicializado na porta 3000 do localhost, portanto qualquer requisição feita de outro endereço (até mesmo portas diferentes do localhost) serão barradas pelo CORS.

Abrir o AluraTyper utilizando o liveserver ou clicando duas vezes no arquivo vão utilizar portas diferentes do localhost e o erro de CORS será acionado.

Abrindo o arquivo pelo explorador:

Imagem mostrando a URL de um arquivo aberto pelo explorador

Abrindo com o liveserver:

Imagem mostrando a URL de um arquivo aberto pelo liveserverNote que o liveserver abriu um servidor na porta 5500.

Espero ter ajudado! Qualquer outra dúvida poste aqui! :)