3
respostas

[Bug] LocalHost e requisições

Olá, tudo bem? Estou com um problema no meu site, no curso de requisições HTTP, para o código funcionar, sempre é necessário dar o npm start, eu hospedei o site no github e não funciona, é como se não fizesse a requisição, caso puderem me ajudar, agradeço, deixarei meu código e um print do devTools:

const urlPrincipal = "http://localhost:3000";
const api = {
    async buscarDados() {
        try {
            const repostaRequisicao = await axios.get(`${urlPrincipal}/pensamentos`);
            return await repostaRequisicao.data;
        } catch (error) {
            alert('Algum erro inesperado aconteceu na busca de dados');
            throw error;
        };
    },
    async salvarNovoDado(pensamento) {
        try {
            const repostaRequisicao = await axios.post(`${urlPrincipal}/pensamentos`, pensamento);
            return await repostaRequisicao.data;
        } catch (error) {
            alert('Algum erro inesperado aconteceu no salvamento de dados');
            throw error;
        };
    },
    async buscarPensamentoParaAlterar(id) {
        try {
            const repostaRequisicao = await axios.get(`${urlPrincipal}/pensamentos/${id}`);
            return await repostaRequisicao.data;
        } catch (error) {
            alert('Algum erro inesperado aconteceu na busca do pensamento');
            throw error;
        }
    },
    async alterarPensamento(pensamento) {
        try {
            const repostaRequisicao = await axios.put(`${urlPrincipal}/pensamentos/${pensamento.id}`,pensamento );
            return await repostaRequisicao.data;
        } catch (error) {
            alert('Algum erro inesperado aconteceu na alteração do pensamento');
            throw error;
        };
    },
    async apagarPensamento(id) {
        try {
            const repostaRequisicao = await axios.delete(`${urlPrincipal}/pensamentos/${id}`);
        } catch (error) {
            alert('Algum erro inesperado aconteceu na exclusão do pensamento');
            throw error;
        };
    },
};

export default api;

Insira aqui a descrição dessa imagem para ajudar na acessibilidade

3 respostas

Olá! Tudo bem?

O problema está na comunicação mesmo, entre o seu site (o que chamamos de front-end) e a sua API (o back-end).

No seu código, a variável urlPrincipal está definida como "http://localhost:3000". O endereço localhost sempre se refere à própria máquina que está acessando o site.

Localmente o "npm start" inicia um servidor local. O navegador acessa "localhost" e encontra o site, fazendo tudo funcionar.
Ao publicar no GitHub Pages, o código no navegador tenta acessar a API em localhost, que é a máquina do visitante, não a sua. Por isso a requisição falha.

A solução é hospedar sua API em um serviço online, assim como você fez com o seu site. O GitHub Pages é excelente para arquivos estáticos (HTML, CSS, JS do front-end), mas a API, que é um processo que precisa ficar rodando em um servidor, precisa de outro tipo de plataforma de hospedagem. Tem algumas mas é um processo mais elaborado que recomendo pesquisar mais a fundo, como Render, Vercel (através de Serverless Functions) Railway.

O passo a passo geral seria, você fazer o deploy da API numa plataforma online (tipo Render, Vercel ou Railway), pega a nova URL pública gerada, substitui no front-end no lugar do http://localhost:3000, e depois publica novamente o site no GitHub Pages para que ele consuma essa API hospedada.

Dessa forma, seu site no GitHub Pages vai conseguir conversar com sua API, pois ambos estarão acessíveis na internet.

Espero ter ajudado! Bons estudos!

Sucesso

Imagem da comunidade

Eu até que pensei nessa possibilidade e agradeço por ter esclarecido, mas basicamente eu teria que copiar o código da api e hospedar esse código no render por exemplo? poderia me dar quase que um passo a passo mais detalhado? agradeço pela ajuda

Aliás, acho que vou continuar com o localHost mesmo, a proposta do curso justamente é simular o ambiente de desenvolvimento com uma api fake usando json server, e mostra uma habilidade ao lidar com node, comandos e etc, mas realmente agradeço