S02L06 - Servidor local, CORS y Proxy

html

Configuración de un Entorno de Desarrollo Local: Backend, Frontend, CORS y Proxy
Tabla de Contenidos

Introducción ………………………………………………………………1
Comprendiendo Frontend y Backend ………………2
Configuración del Backend con Spring Boot ……4

Requisitos Previos ………………………………………4
Ejecutando la Aplicación Backend………5
Documentación de API con Swagger……………6


Probando APIs con Postman ………………………………8
Configuración del Frontend con React ……………10

Ejecutando la Aplicación Frontend………11


Manejando Problemas de CORS …………………………………………13

Comprendiendo CORS ……………………………………13
Configurando Proxy en Frontend………………14
Modificando Spring Boot para CORS……………15


Conclusión ……………………………………………………………………18
Recursos Adicionales …………………………………………19


Introducción
En el ámbito del desarrollo web moderno, crear una interacción fluida entre el frontend y el backend de una aplicación es primordial. Este eBook profundiza en los aspectos esenciales para configurar un entorno de desarrollo local, enfocándose en la integración de frontend y backend, manejo de problemas de Cross-Origin Resource Sharing (CORS), y configuración de proxies. Al final de esta guía, estarás equipado con el conocimiento para ejecutar y gestionar eficientemente tanto aplicaciones frontend como backend, asegurando un flujo de trabajo de desarrollo sin contratiempos.
Comprendiendo Frontend y Backend
¿Qué es el Frontend?
El frontend de una aplicación es su parte visible: la interfaz de usuario con la que interactúan los usuarios. Abarca todo lo que los usuarios ven e interactúan directamente, incluyendo layouts, elementos de diseño, botones y características interactivas.
¿Qué es el Backend?
El backend, a menudo referido como el lado del servidor, maneja la lógica de la aplicación, interacciones con la base de datos, autenticación y provee datos al frontend. Realiza el trabajo pesado necesario para procesar las solicitudes de los usuarios y entregar las respuestas apropiadas.
La Relación Simbiótica
Para que una aplicación funcione correctamente, el frontend y el backend deben trabajar en armonía. El backend provee los datos y servicios necesarios que el frontend consume para ofrecer una experiencia de usuario dinámica y responsiva.


Componente
Frontend
Backend


Rol
Interfaz de usuario y experiencia de usuario
Procesamiento de datos, lógica de negocio y almacenamiento


Tecnologías
React, Angular, Vue.js, HTML, CSS, JavaScript
Spring Boot, Node.js, Python, Ruby, Java


Interacción
Envía solicitudes, muestra datos obtenidos
Recibe solicitudes, procesa datos, envía respuestas


Configuración del Backend con Spring Boot
Requisitos Previos
Antes de sumergirte en la configuración del backend, asegúrate de tener lo siguiente instalado en tu sistema local:

Java Development Kit (JDK) 17: Esencial para ejecutar aplicaciones basadas en Java.
Entorno de Desarrollo Integrado (IDE): Se recomienda VS Code por su versatilidad y amplio soporte de plugins.
Spring Boot: Un framework que simplifica el arranque y desarrollo de aplicaciones Java.

Instalando Java 17

Visita la página de descarga de Microsoft OpenJDK.
Selecciona JDK 17 y descarga el instalador compatible con tu sistema operativo.
Sigue las indicaciones de instalación para configurar Java en tu máquina.

Configurando VS Code

Descarga VS Code desde el sitio web oficial.
Instala las extensiones necesarias para Java y Spring Boot para mejorar tu experiencia de desarrollo.

Ejecutando la Aplicación Backend

Abrir el Proyecto en VS Code:

Haz clic derecho en la carpeta del proyecto.
Selecciona Abrir en Terminal.
Ejecuta 



		
		
			
			
Java
			
			code .
			
				
					
				
					1
				
						code .
					
				
			
		

 para lanzar el proyecto en VS Code.


Seleccionando el Archivo Principal:

Navega a un controlador o cualquier archivo Java dentro del proyecto.
Haz clic en el botón Run (icono de reproducción) en la esquina superior derecha.
VS Code identificará el método principal y comenzará la aplicación.


Accediendo al Backend:

Una vez que la aplicación inicie, navega a http://localhost:8080 en tu navegador.
Podrás ver endpoints como /api/v1 que forman parte de tus rutas API.



Documentación de API con Swagger
Swagger es una herramienta poderosa para la documentación y prueba de APIs. Proporciona una interfaz interactiva para explorar y probar tus APIs backend.

Acceder a Swagger UI:

Navega a http://localhost:8080/swagger-ui/index.html para ver la documentación de Swagger.
Esta interfaz te permite ver todas las APIs disponibles y sus funcionalidades.


Exportando Swagger JSON:

Haz clic en el enlace Swagger JSON dentro de Swagger UI.
Guarda el archivo JSON como api-docs.json en el directorio de tu proyecto para uso posterior con herramientas como Postman.




Probando APIs con Postman
Postman es una herramienta indispensable para desarrolladores para probar e interactuar con APIs sin la necesidad de una interfaz frontend.
Instalando Postman

Visita la página de descarga de Postman.
Elige la versión compatible con tu sistema operativo.
Instala y lanza Postman.

Importando Documentación Swagger en Postman

Importar el Swagger JSON:

Abre Postman.
Haz clic en Import y selecciona el archivo api-docs.json que guardaste anteriormente.
Esto generará una Colección de Postman con todos tus endpoints API.


Probando Endpoints API:

Selecciona un endpoint API de la colección.
Haz clic en Send para ejecutar la solicitud.
Observa la respuesta en el panel de respuestas de Postman.




Configuración del Frontend con React
Ejecutando la Aplicación Frontend
La aplicación frontend está construida usando React, una popular biblioteca de JavaScript para crear interfaces de usuario.

Navegar al Directorio Frontend:

Abre una nueva ventana de terminal.
Cambia al directorio frontend usando 



		
		
			
			
Java
			
			cd frontend
			
				
					
				
					1
				
						cd frontend
					
				
			
		

.


Instalar Dependencias:

Ejecuta 



		
		
			
			
Java
			
			npm install
			
				
					
				
					1
				
						npm install
					
				
			
		

 para instalar todos los paquetes y dependencias necesarias.


Iniciar el Servidor Frontend:

Ejecuta 



		
		
			
			
Java
			
			npm start
			
				
					
				
					1
				
						npm start
					
				
			
		

 para lanzar la aplicación frontend.
La aplicación se ejecutará en http://localhost:3000 por defecto.


Verificando el Frontend:

Abre tu navegador y navega a http://localhost:3000.
Deberías ver la interfaz frontend mostrando datos del backend.



Personalizando las Llamadas API del Frontend
Reemplazando URLs de API
Inicialmente, el frontend podría usar APIs de marcador de posición. Para conectarse con tu backend local:

Abre los archivos JavaScript relevantes en tu proyecto frontend.
Reemplaza las URLs de API de marcador de posición con http://localhost:8080/api/v1.





		
		
			
			
Java
			
			// Ejemplo: src/config.js
const API_BASE_URL = 'http://localhost:8080/api/v1';
export default API_BASE_URL;
			
				
					
				
					1
2
3
				
						// Ejemplo: src/config.js
const API_BASE_URL = 'http://localhost:8080/api/v1';
export default API_BASE_URL;
					
				
			
		



Reiniciar el Servidor Frontend:

Después de hacer cambios, detén el servidor frontend actual.
Ejecuta 



		
		
			
			
Java
			
			npm start
			
				
					
				
					1
				
						npm start
					
				
			
		

 nuevamente para aplicar las actualizaciones.



Manejando Problemas de CORS
Comprendiendo CORS
Cross-Origin Resource Sharing (CORS) es una característica de seguridad implementada por los navegadores para restringir que las aplicaciones web realicen solicitudes a un dominio diferente al que sirvió la página web. Cuando el frontend y el backend están alojados en diferentes puertos o dominios, las políticas de CORS pueden bloquear las solicitudes, lo que conduce a errores.
Configurando Proxy en Frontend
Una forma de mitigar los problemas de CORS es configurando un proxy en la aplicación frontend, lo que permite que el frontend se comunique con el backend sin problemas.

Agregar Configuración de Proxy en package.json:

    



		
		
			
			
Java
			
			{
  // ...
  "proxy": "http://localhost:8080"
}
			
				
					
				
					1
2
3
4
				
						{
  // ...
  "proxy": "http://localhost:8080"
}
					
				
			
		


  
Efecto de la Configuración de Proxy:

Con esta configuración, las llamadas API desde el frontend a rutas como /api/v1 serán proxied a http://localhost:8080/api/v1, evitando las restricciones de CORS.



Modificando Spring Boot para CORS
Si el proxy no es suficiente, modificar el backend para permitir orígenes específicos puede resolver los problemas de CORS.

Actualizar Anotaciones del Controlador:
Abre tus archivos de controlador en el proyecto backend. Añade la anotación @CrossOrigin con la URL del frontend.
    




		
		
			
			
Java
			
			// Ejemplo: AlbumController.java
@RestController
@RequestMapping("/api/v1/albums")
@CrossOrigin(origins = "http://localhost:3000")
public class AlbumController {
    // Métodos del controlador
}
			
				
					
				
					1
2
3
4
5
6
7
				
						// Ejemplo: AlbumController.java
@RestController
@RequestMapping("/api/v1/albums")
@CrossOrigin(origins = "http://localhost:3000")
public class AlbumController {
    // Métodos del controlador
}
					
				
			
		


  
Configuración Global de CORS:
Para un enfoque más escalable, configura CORS de manera global.
    




		
		
			
			
Java
			
			// Ejemplo: SecurityConfig.java
@Configuration
public class SecurityConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
    
    // Otras configuraciones de seguridad
}
			
				
					
				
					1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
				
						// Ejemplo: SecurityConfig.java
@Configuration
public class SecurityConfig {
    
    @Bean
    public WebMvcConfigurer corsConfigurer() {
        return new WebMvcConfigurer() {
            @Override
            public void addCorsMappings(CorsRegistry registry) {
                registry.addMapping("/api/**")
                        .allowedOrigins("http://localhost:3000")
                        .allowedMethods("GET", "POST", "PUT", "DELETE")
                        .allowCredentials(true);
            }
        };
    }
    
    // Otras configuraciones de seguridad
}
					
				
			
		


  
Reiniciar el Servidor Backend:

Después de hacer cambios, reinicia el backend para aplicar las nuevas configuraciones de CORS.



Verificando la Configuración de CORS

Inspeccionar Llamadas de Red:

Abre las herramientas de desarrollador de tu navegador.
Navega a la pestaña Network.
Refresca la página frontend y observa las llamadas API.


Llamadas API Exitosas:

Si está configurado correctamente, las llamadas API deberían tener éxito sin errores de CORS.
Las respuestas del backend serán recibidas exitosamente por el frontend.



Conclusión
Configurar un entorno de desarrollo local que integre de manera fluida los componentes frontend y backend es crucial para un desarrollo web eficiente. Al comprender los roles de frontend y backend, configurar herramientas como Spring Boot y React, y manejar problemas de CORS mediante proxies y configuraciones del backend, los desarrolladores pueden crear aplicaciones robustas y seguras. El dominio de estos conceptos no solo agiliza el proceso de desarrollo, sino que también sienta una base sólida para construir soluciones web escalables y mantenibles.
Palabras Clave SEO: desarrollo frontend, configuración backend, Spring Boot, integración React, manejo de CORS, configuración de proxy, entorno de desarrollo local, prueba de API con Postman, documentación de API Swagger, configuración de Java 17, VS Code para Java, política CORS, Cross-Origin Resource Sharing, mejores prácticas de desarrollo web
Recursos Adicionales

Documentación de Spring Boot
Sitio Oficial de React
Centro de Aprendizaje de Postman
Comprendiendo CORS
Guía de Swagger UI
Extensiones de VS Code para Java
Descargas de Java 17


Este eBook proporcionó una guía completa para configurar un entorno de desarrollo local, integrar aplicaciones frontend y backend, y gestionar eficazmente problemas de CORS. Al seguir los pasos delineados, los desarrolladores pueden asegurar un flujo de trabajo fluido y eficiente en sus proyectos de desarrollo web.
Nota: Este artículo fue generado por IA.
Componente	Frontend	Backend
Rol	Interfaz de usuario y experiencia de usuario	Procesamiento de datos, lógica de negocio y almacenamiento
Tecnologías	React, Angular, Vue.js, HTML, CSS, JavaScript	Spring Boot, Node.js, Python, Ruby, Java
Interacción	Envía solicitudes, muestra datos obtenidos	Recibe solicitudes, procesa datos, envía respuestas