Normalmente Spring Boot se usa como backend, y el frontend se desarrolla con frameworks como:

Angular
React
Vue

El frontend se comunica con el backend mediante APIs REST.

Arquitectura típica:

1Frontend (Angular / React)
2        ↓
3      API REST
4        ↓
5Spring Boot Backend
6        ↓
7     Base de datos

18.1 Ejemplo de API en Spring Boot

Supongamos este endpoint:

1@RestController
2@RequestMapping("/users")
3public class UserController {
4
5    @GetMapping
6    public List<UserDTO> getUsers() {
7
8        return List.of(
9                new UserDTO(1L,"Ana","ana@email.com"),
10                new UserDTO(2L,"Carlos","carlos@email.com")
11        );
12
13    }
14
15}

URL de la API:

1http://localhost:8080/users

18.2 Consumir API desde Angular

Ejemplo usando HttpClient.

Servicio Angular

1@Injectable({
2  providedIn: 'root'
3})
4export class UserService {
5
6  constructor(private http: HttpClient) {}
7
8  getUsers() {
9    return this.http.get<User[]>('http://localhost:8080/users');
10  }
11
12}

Usar servicio en componente

1export class UserComponent {
2
3  users: User[] = [];
4
5  constructor(private userService: UserService) {}
6
7  ngOnInit() {
8
9    this.userService.getUsers()
10      .subscribe(data => {
11        this.users = data;
12      });
13
14  }
15
16}

18.3 Consumir API desde React

Ejemplo usando fetch.

1useEffect(() => {
2
3  fetch("http://localhost:8080/users")
4    .then(res => res.json())
5    .then(data => setUsers(data));
6
7}, []);

18.4 Problema CORS

Cuando frontend y backend están en servidores diferentes, el navegador puede bloquear la petición.

Ejemplo:

1Frontend → localhost:4200
2Backend → localhost:8080

Error típico:

1CORS policy blocked request

18.5 Solución CORS en Spring Boot

Podemos permitir peticiones desde el frontend.

Configuración global

1@Configuration
2public class CorsConfig {
3
4    @Bean
5    public WebMvcConfigurer corsConfigurer() {
6
7        return new WebMvcConfigurer() {
8
9            @Override
10            public void addCorsMappings(CorsRegistry registry) {
11
12                registry.addMapping("/**")
13                        .allowedOrigins("http://localhost:4200")
14                        .allowedMethods("*");
15
16            }
17
18        };
19
20    }
21
22}

18.6 Permitir CORS en un controller

También se puede usar:

1@CrossOrigin(origins = "http://localhost:4200")
2@RestController
3@RequestMapping("/users")
4public class UserController {
5
6}

18.7 Enviar datos desde frontend

Ejemplo crear usuario.

Angular

1createUser(user: User) {
2  return this.http.post("http://localhost:8080/users", user);
3}

JSON enviado

1{
2  "name": "Ana",
3  "email": "ana@email.com"
4}

Controller Spring

1@PostMapping
2public User createUser(@RequestBody CreateUserDTO dto) {
3
4    return service.createUser(dto);
5
6}

18.8 Autenticación con JWT

En aplicaciones modernas el frontend se autentica con JWT.

Flujo

11 login
22 backend genera token
33 frontend guarda token
44 frontend envía token en cada petición

1{
2  "username": "admin",
3  "password": "1234"
4}

Respuesta

1{
2  "token": "eyJhbGciOiJIUzI1NiIs..."
3}

18.9 Enviar token desde frontend

Angular:

1const headers = {
2  Authorization: "Bearer " + token
3};
4
5this.http.get("/users", { headers });

React:

1fetch("/users", {
2  headers: {
3    Authorization: "Bearer " + token
4  }
5});

18.10 Interceptor en Angular

Lo ideal es enviar el token automáticamente.

Ejemplo

1@Injectable()
2export class AuthInterceptor implements HttpInterceptor {
3
4  intercept(req: HttpRequest<any>, next: HttpHandler) {
5
6    const token = localStorage.getItem("token");
7
8    if(token) {
9      req = req.clone({
10        setHeaders: {
11          Authorization: "Bearer " + token
12        }
13      });
14    }
15
16    return next.handle(req);
17
18  }
19
20}

18.11 Arquitectura típica frontend + backend

1Angular / React
2       ↓
3     API REST
4       ↓
5Spring Boot
6       ↓
7Database

18.12 Buenas prácticas

No exponer entidades

Usar DTO.

Manejar errores HTTP

Ejemplo:

1404 usuario no encontrado
2401 no autorizado

Usar tokens JWT

Evita sesiones en servidor.

Configurar CORS correctamente

Permitir solo dominios necesarios.

Curso de Spring Boot