Error en live server al elegir una pélicula

¡Hola Oswaldo, espero que estés bien!

¿Podría mostrarme tu código por favor?

Entiendo que estás experimentando un problema al seleccionar una imagen en la página de Screen Match, ya que te redirige a una página de error con el mensaje "Cannot GET /detalles.html" y muestra un error en la consola. Parece que el error está relacionado con la ruta de la página "detalles.html" y el código 404 (Not Found).

Dado que estás trabajando en la creación de una API y su conexión al front-end, es posible que el problema esté relacionado con la configuración de las rutas en tu servidor o en tu aplicación front-end. Es importante asegurarse de que la ruta "detalles.html" esté configurada correctamente y que el servidor esté sirviendo esa página de manera adecuada.

Si estás utilizando un servidor local, como parece ser el caso por la URL "http://127.0.0.1:5500/detalles.html", verifica que el archivo "detalles.html" esté ubicado en la ruta esperada y que el servidor esté configurado para servir ese archivo cuando se accede a esa URL.

También es importante revisar la configuración de las rutas en tu aplicación front-end para asegurarte de que esté realizando la solicitud correcta a la API y manejando la respuesta de manera adecuada.

Espero que estas sugerencias te ayuden a solucionar el problema. Recuerda que revisar la configuración de las rutas y el manejo de las solicitudes puede ser clave para resolver este tipo de errores.

Un saludo y mucho ánimo en la resolución de este inconveniente. ¡Espero que puedas encontrar la solución pronto!

Espero haber ayudado y buenos estudios!

¡Gracias por tu aporte Brenda! Si me ayudo a entender mas el problema y consulte con Luri un poco al respecto para darme una idea de como se podría resolver, pero desafortunadamente cai en un circulo donde cada cambio que hago sigue habiendo un error.

@RestController
@RequestMapping("/series")
public class SerieController {

//Otros getMappings

@GetMapping("/{id}")
    public SerieDTO obtenerPorId (@PathVariable Long id) {
        return servicio.obtenerPorId(id);
        }
}

Este es la parte que tengo en back-end

en el front-end no sé mucho al respecto todavía... Descargue el archivo para poder practicar que venía en el curso, pero creo que el detalle está en la siguiente función:

function crearListaPeliculas(elemento, datos) {
    // Verifica si hay un elemento <ul> dentro de la seccion
    const ulExistente = elemento.querySelector('ul');

    // Si un elemento <ul> ya existe dentro de la seccion, borrarlo
    if (ulExistente) {
        elemento.removeChild(ulExistente);
    }

    const ul = document.createElement('ul');
    ul.className = 'lista';
    const listaHTML = datos.map((pelicula) => `
        <li>
            <a href="/detalles/${pelicula.id}">
                <img src="${pelicula.poster}" alt="${pelicula.titulo}">
            </a>
        </li>
    `).join('');

    ul.innerHTML = listaHTML;
    elemento.appendChild(ul);
}

Hola Oswaldo, tal vez llegué un poco tarde, pero me sucedía lo mismo y después de andar revisando el codigo noté que el redireccionamiento que hace index.js para visualizar detalles.html es incorrecto y lo toma como un directorio por el simbolo "/" si eliminamos dicho simbolo la el redireccionamiento funciona. Te adjunto el codigo corregido.

import getdatos from "./getDatos.js";

// Mapea los elementos DOM que desea actualizar
const elementos = {
    top5: document.querySelector('[data-name="top5"]'),
    lanzamientos: document.querySelector('[data-name="lanzamientos"]'),
    series: document.querySelector('[data-name="series"]')
};

// Funcion para crear la lista de peliculas

function crearListaPeliculas(elemento, datos) {
    // Verifica si hay un elemento <ul> dentro de la seccion
    const ulExistente = elemento.querySelector('ul');

    // Si un elemento <ul> ya existe dentro de la seccion, borrarlo
    if (ulExistente) {
        elemento.removeChild(ulExistente);
    }

    const ul = document.createElement('ul');
    ul.className = 'lista';
    const listaHTML = datos.map((pelicula) => `
        <li>
            <a href="detalles.html?id=${pelicula.id}">
                <img src="${pelicula.poster}" alt="${pelicula.titulo}">
            </a>
        </li>
    `).join('');

    ul.innerHTML = listaHTML;
    elemento.appendChild(ul);
}

// Funcion genérica para tratamiento de errores
function tratarConErrores(mensajeError) {
    console.error(mensajeError);
}

const categoriaSelect = document.querySelector('[data-categorias]');
const sectionsParaOcultar = document.querySelectorAll('.section'); // Adicione a classe CSS 'hide-when-filtered' às seções e títulos que deseja ocultar.

categoriaSelect.addEventListener('change', function () {
    const categoria = document.querySelector('[data-name="categoria"]');
    const categoriaSeleccionada = categoriaSelect.value;

    if (categoriaSeleccionada === 'todos') {

        for (const section of sectionsParaOcultar) {
            section.classList.remove('hidden')
        }
        categoria.classList.add('hidden');

    } else {

        for (const section of sectionsParaOcultar) {
            section.classList.add('hidden')
        }

        categoria.classList.remove('hidden')
        // Haga una solicitud para el endpoint com la categoria seleccionada
        getdatos(`/series/categoria/${categoriaSeleccionada}`)
            .then(data => {
                crearListaPeliculas(categoria, data);
            })
            .catch(error => {
                tratarConErrores("Ocurrio un error al cargar los datos de la categoria.");
            });
    }
});

// Array de URLs para las solicitudes
generaSeries();
function generaSeries() {
    const urls = ['/series/top5', '/series/lanzamientos', '/series'];

    // Hace todas las solicitudes en paralelo
    Promise.all(urls.map(url => getdatos(url)))
        .then(data => {
            crearListaPeliculas(elementos.top5, data[0]);
            crearListaPeliculas(elementos.lanzamientos, data[1]);
            crearListaPeliculas(elementos.series, data[2].slice(0, 5));
        })
        .catch(error => {
            tratarConErrores("Ocurrio un error al cargar los datos.");
        });

}