1. Configuración de CORS en el backend

La política de mismo origen restringe la interacción entre scripts de JavaScript de un dominio y recursos de otro dominio distinto. Dos páginas se consideran del mismo origen si comparten el mismo protcoolo, host y númeero de puerto.

import org.springframework.context.annotation.Bean;
import org.springframework.context.annotation.Configuration;
import org.springframework.web.cors.CorsConfiguration;
import org.springframework.web.cors.UrlBasedCorsConfigurationSource;
import org.springframework.web.filter.CorsFilter;

@Configuration
public class CorsPolicyConfig {

    // Tiempo máximo de validez para las solicitudes CORS (en segundos)
    private static final long CORS_MAX_AGE_SECONDS = 86400; // 24 horas

    @Bean
    public CorsFilter customCorsFilter() {
        UrlBasedCorsConfigurationSource configSource = new UrlBasedCorsConfigurationSource();
        CorsConfiguration policy = new CorsConfiguration();
        policy.addAllowedOriginPattern("*"); // Permitir cualquier origen
        policy.addAllowedHeader("*"); // Permitir todos los encabezados
        policy.addAllowedMethod("*"); // Permitir todos los métodos HTTP
        policy.setMaxAge(CORS_MAX_AGE_SECONDS);
        configSource.registerCorsConfiguration("/**", policy);
        return new CorsFilter(configSource);
    }
}

2. Gestión de solicitudes HTTP desde el frontend

En aplicaciones Vue.js, la librería Axios facilita el envío de peticiones HTTP al backend. Axios es un cliente HTTP basado en Promesas, compatible con entornos de navegador y Node.js.

npm install axios

// Crear una instancia de Axios con configuración personalizada
import axios from 'axios';

const apiClient = axios.create({
    baseURL: 'http://localhost:3000/api/users', // URL base para las solicitudes
    timeout: 10000 // Tiempo de espera en milisegundos
});

// Interceptor para solicitudes: se ejecuta antes de enviar la petición
apiClient.interceptors.request.use(
    config => {
        config.headers['Accept'] = 'application/json';
        // Ejemplo: agregar un token de autenticación si está disponible
        // const authToken = localStorage.getItem('authToken');
        // if (authToken) config.headers.Authorization = `Bearer ${authToken}`;
        return config;
    },
    err => Promise.reject(err)
);

// Interceptor para respuestas: se ejecuta después de recibir la respuesta
apiClient.interceptors.response.use(
    res => {
        const responseData = res.data;
        // Manejar respuestas de tipo blob (por ejemplo, descarga de archivos)
        if (res.config.responseType === 'blob') {
            return responseData;
        }
        // Parsear datos si la respuesta es una cadena JSON
        if (typeof responseData === 'string') {
            try {
                return JSON.parse(responseData);
            } catch (e) {
                return responseData;
            }
        }
        return responseData;
    },
    err => {
        console.error('Error en la solicitud:', err.message);
        return Promise.reject(err);
    }
);

export default apiClient;

Para integrar la instancia en Vue, se puede registrar globalmente en el archivo principle (por ejemplo, main.js): Vue.prototype.$api = apiClient;. Luego, usarla en componentes para realizar peticiones:

// Ejemplo de solicitud GET a un endpoint específico
this.$api.get('/list')
    .then(response => console.log(response))
    .catch(error => console.error(error));