A aplicação sobe mas não é possível fazer o cadastro

Segue a página do Json Server

Ao explorar a ferramenta de desenvolvimento do Firefox, na aba redes, notei o problema de cross-origin bloqueada. Pesquisando, descobri que esse erro ocorre quando a origem é diferente do destino. Neste caso, eu acesso a página via remoto, isto é, pelo IP (192.168.0.12:3000); ao realizar a tentativa de cadastro, o front tentava a comunicação via localhost:8000, que é entendido como 127.0.0.1:8000. Dessa forma, a comunicação era bloqueada. Para resolver, mesmo que paliativamente, uma vez que meus conhecimentos em aplicações web são limitados, eu alterei a constante baseURL da constante http no arquivo .../curso-react-alurabooks/src/http/index.ts

Antes

...
const http = axios.create({
    baseURL: 'http://localhost:8000',
    headers: {
        Accept: 'application/json',
        Content: 'application/json'
    }
})
...

Depois

...
const http = axios.create({
    baseURL: 'http://192.168.0.12:8000',
    headers: {
        Accept: 'application/json',
        Content: 'application/json'
    }
})
...

Alguém possui uma solução mais refinada? Eu vi que há algo sobre cors, que permitiria os endereços serem distintos. Até tentei configurar isso, mas sem sucesso.

Olá, Albert. Tudo bem?

Sobre sua última dúvida, como você está enfrentando problemas de CORS por acessar o backend e o frontend em endereços distintos, uma solução mais refinada é configurar as permissões de CORS no próprio servidor backend. Isso permitirá que você especifique quais origens (IPs/domínios) podem fazer requisições ao seu backend, evitando a necessidade de modificar a URL no código do frontend.

No caso, utilizando o Node.js com Express como backend, você pode adicionar o pacote cors para permitir requisições de origens diferentes. Aqui está um exemplo de como configurar isso:

1. Instale o pacote CORS:

   
   npm install cors
   

2. Aplique o CORS no servidor:

   No arquivo onde o servidor backend é inicializado (por exemplo, server.js), adicione o seguinte código:

   
   const express = require('express');
   const cors = require('cors');
   const app = express();
   
   // Permitir somente o IP específico do frontend
   const corsOptions = {
       origin: 'http://192.168.0.12:3000', // Substitua pelo IP do frontend
       optionsSuccessStatus: 200
   };
   
   app.use(cors(corsOptions));
   
   // Resto da configuração do servidor
   app.listen(8000, () => {
       console.log('Servidor rodando na porta 8000');
   });
   

   Dessa forma, você está especificando que apenas requisições vindas do endereço http://192.168.0.12:3000 são permitidas.

3. Verifique as configurações do frontend para garantir que a baseURL aponte para o IP correto do backend (http://192.168.0.12:8000), o que já foi configurado corretamente por você.

Essas mudanças devem resolver o problema de CORS e permitir que o frontend acesse o backend sem problemas.

Fico à disposição. Abraços e bons estudos!