Integración con frontend (Angular / React)

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

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

2. Consumir API desde Angular #

Ejemplo usando HttpClient.

3. 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}

4. 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}

5. 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}, []);

6. 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

7. Solución CORS en Spring Boot #

Podemos permitir peticiones desde el frontend.

8. 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}

9. 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}

10. Enviar datos desde frontend #

Ejemplo crear usuario.

11. Angular #

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

12. JSON enviado #

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

13. Controller Spring #

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

14. Autenticación con JWT #

En aplicaciones modernas el frontend se autentica con JWT.

15. Flujo #

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

16. Login request #

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

17. Respuesta #

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

18. 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});

19. Interceptor en Angular #

Lo ideal es enviar el token automáticamente.

20. 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}

21. Arquitectura típica frontend + backend #

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

22. 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.