Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
Ya estoy inscrito ¿Todavía no tienes acceso? Nuestros Planes
1
respuesta

No se muestran las imagenes en el Front.

Al momento de desplegar la aplicación ScreenMatch no se logran ver los posters de las peliculas ni las peliculas. En consola me aparece los siguientes errores:

index.html:1 Access to fetch at 'http://localhost:8080/series/lanzamientos' from origin 'http://127.0.0.1:5500' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.
getDatos.js:5 
        
        
       GET http://localhost:8080/series/lanzamientos net::ERR_FAILED 404 (Not Found)

Sin embargo, ya tengo todas las depencias de desarrollo y web en archivo pom.xlm y los CORS en su Clase CorsConfiguration.java:

package com.aluracursos.screenmatch.config;

import org.springframework.web.servlet.config.annotation.CorsRegistry;
import org.springframework.web.servlet.config.annotation.WebMvcConfigurer;

import java.lang.reflect.Method;

public class CorsConfiguration implements WebMvcConfigurer {
    @Override
    public  void addCorsMappings(CorsRegistry registry){
        registry.addMapping("/**")
                .allowedOrigins("http://127.0.0.1:5500/")
                .allowedMethods(
                        "GET",
                        "POST",
                        "PUT",
                        "DELETE",
                        "OPTIONS",
                        "HEAD",
                        "TRACE",
                        "CONNECT"
                );
    }

:

A continuación, te muestro como se ve el front-end de la Aplicacion:

Screenshot ScreenMatch AplicationAdemás, en el network tengo un status code: 200 OK en la solicitud de top5 y series.

Status code ScreenMatch App

Podrías darme una guia para entender que esta pasando y como puedo solucionarlo, por favor.

1 respuesta

¡Hola Cesar, espero que estés bien!

Entiendo que estás experimentando problemas para mostrar las imágenes en el frontend de tu aplicación ScreenMatch y estás recibiendo errores relacionados con la política de CORS y solicitudes que no se encuentran. Parece que has configurado correctamente las dependencias de desarrollo y web en el archivo pom.xml y los CORS en la clase CorsConfiguration.java, lo cual es un buen paso.

El error que estás viendo, relacionado con CORS, indica que el servidor no está configurado para permitir solicitudes desde el origen especificado. En tu configuración de CORS, veo que estás permitiendo el origen http://127.0.0.1:5500/, pero el error menciona que la solicitud desde ese origen ha sido bloqueada. Es posible que el problema esté relacionado con la configuración de CORS en tu servidor.

Además, veo que estás recibiendo un error 404 (Not Found) al intentar acceder a la URL http://localhost:8080/series/lanzamientos, lo cual puede estar contribuyendo a que las imágenes no se muestren correctamente en el frontend.

Para solucionar estos problemas, te recomendaría revisar detenidamente la configuración de CORS en tu servidor y asegurarte de que esté permitiendo correctamente las solicitudes desde el origen del frontend. Además, verifica la existencia y la configuración de la URL http://localhost:8080/series/lanzamientos para asegurarte de que esté disponible y responda correctamente a las solicitudes.

Espero que esta guía te ayude a entender lo que está sucediendo y a encontrar una solución para mostrar las imágenes en el frontend de tu aplicación. ¡Sigue adelante y no dudes en preguntar si necesitas más ayuda!

Espero haber ayudado y buenos estudios!