¡Hola Estudiante, espero que estés bien!
Entiendo que estás experimentando un error CORS al intentar acceder a tu API desde el puerto 5500 en tu front-end. La política de CORS (Cross-Origin Resource Sharing) es una medida de seguridad implementada en los navegadores para restringir las solicitudes HTTP entre diferentes orígenes. En tu caso, el front-end y el back-end están en puertos diferentes, lo que provoca este error.
Para solucionar este problema, necesitas configurar tu back-end para permitir solicitudes desde el origen del front-end. Puedes hacerlo creando una clase de configuración que implemente la interfaz WebMvcConfigurer
y anotándola con @Configuration
. Aquí tienes un ejemplo de cómo podrías hacerlo:
@Configuration
public class CORSConfiguration implements WebMvcConfigurer {
@Override
public void addCorsMappings(CorsRegistry registry) {
registry.addMapping("/series")
.allowedOrigins("http://127.0.0.1:5500") // Reemplaza con la URL de tu front-end
.allowedMethods("GET", "POST", "PUT", "DELETE");
}
}
En este ejemplo, estamos permitiendo que el front-end en http://127.0.0.1:5500
realice solicitudes GET, POST, PUT y DELETE a la ruta /series
en el back-end. Asegúrate de reemplazar la URL con la correcta de tu front-end.
Una vez que hayas realizado esta configuración, deberías poder acceder a los datos de tu API desde tu front-end sin problemas de CORS.
Espero que esta información te sea útil. ¡Mucho ánimo con tu proyecto y cualquier otra duda que tengas, aquí estamos para ayudarte!
Espero haber ayudado y buenos estudios!