Quando você está desenvolvendo uma aplicação frontend que se comunica com o backend, pode encontrar o erro de CORS (Cross-Origin Resource Sharing). Isso acontece porque o navegador bloqueia requisições feitas de um domínio diferente daquele onde a API está hospedada, por questões de segurança.
No seu exemplo, você está tentando fazer uma requisição ao backend (que está rodando na porta 8080) a partir de um arquivo HTML local. Para resolver isso, precisamos permitir explicitamente o acesso ao backend para esse domínio.
A solução simples é usar a anotação @CrossOrigin no controlador da API, que permite que o Spring Boot aceite requisições de outras origens.
No seu PessoaController, adicione a anotação @CrossOrigin(value = "*") antes da definição da classe ou do método específico que você quer liberar o acesso:
import org.springframework.web.bind.annotation.CrossOrigin;
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
@CrossOrigin(value = "*") // Permite todas as origens
@RestController
@RequestMapping("/pessoa")
public class PessoaController {}
Explicando a anotação:
Agora, ao executar o arquivo HTML que você forneceu, o navegador permitirá que a requisição à API seja feita sem bloquear devido a CORS.
Para testar, você pode acessar o arquivo HTML e verificar o retorno no console do navegador. No código abaixo, a requisição está sendo feita à rota /selecionar, que deve retornar os dados das pessoas cadastradas na base:
Agora, ao abrir o arquivo HTML no navegador, você deverá ver a resposta da API sendo exibida no console, o que confirma que a requisição está sendo feita corretamente.
No vídeo abaixo, mostro como configurar o CORS na sua API e testar a requisição no navegador para garantir que está funcionando corretamente.