es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Problema con enrutamiento estático en Node.js utilizando express.

27 Jul, 2023 Programación

Tengo un problema con un código de enrutamiento personalizado. Todo funciona bien y está sincronizado con la ruta de vista del lado del cliente que hago, pero en cuanto tengo una subpágina, no enruta mis archivos estáticos correctamente.

Error al cargar el módulo de script: Se esperaba un módulo de script de JavaScript, pero el servidor respondió con un tipo MIME de “text/html”. Se aplica la comprobación estricta de tipos MIME para los módulos de scripts según la especificación de HTML.

En lugar de darme un archivo desde el directorio raíz, lo sirve como si fuera desde la subcarpeta.

Por ejemplo: voy a http://localhost/sign-up, y los archivos que se cargan en mi archivo índice desde “/scripts” se cargan, pero si voy a http://localhost/sign-up/2, intentará cargar el script desde “/sign-up/scripts”.

const express = require('express');
const path = require('path');

const app = express();

app.use('/views', express.static(path.resolve(__dirname, 'frontend', 'views')));

app.use('/styles', express.static(path.resolve(__dirname, 'frontend', 'styles')));
app.use('/scripts', express.static(path.resolve(__dirname, 'frontend', 'scripts')));
app.use('/media', express.static(path.resolve(__dirname, 'frontend', 'media')));

app.get('/*', (req, res) => {
    res.sendFile(path.resolve(__dirname, 'frontend', 'newSite.html'));
});

app.listen(process.env.PORT || 1234, () => console.log('El servidor está funcionando...'));

Para solucionar esto, he estado siguiendo estos tutoriales de DCODE en YouTube, pero no veo nada incorrecto:

Tags:  , , , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Parece que el problema está en cómo se sirven los archivos estáticos en el código. El middleware express.static se está utilizando para servir archivos estáticos desde la carpeta “frontend” pero con una ruta URL específica. Sin embargo, cuando se solicita una URL de una subpágina, puede ocasionar que los archivos estáticos se sirvan desde una ruta de carpeta incorrecta.

    Para solucionar este problema, una mejor manera sería utilizar rutas relativas para las URL en el código HTML en lugar de URL absolutas. Esto significa utilizar “./scripts” en lugar de “/scripts” para que las URL sean relativas a la página actual. Esto asegurará que los archivos estáticos se carguen correctamente, independientemente de la ruta de URL solicitada.

    Otra forma de solucionar este problema sería pasar la ruta base de la URL como parámetro al middleware express.static. Esto significa agregar un nuevo middleware en el código antes de los middlewares de archivos estáticos que establezca la ruta base correcta para los archivos estáticos. Aquí tienes un ejemplo:

    app.use(function(req, res, next) {
  res.locals.baseUrl = req.protocol + '://' + req.headers.host +
    req.baseUrl + (req.baseUrl.endsWith('/') ? '' : '/');
  next();
});

app.use(res.locals.baseUrl + 'views', express.static(path.resolve(__dirname, 'frontend', 'views')));
app.use(res.locals.baseUrl + 'styles', express.static(path.resolve(__dirname, 'frontend', 'styles')));
app.use(res.locals.baseUrl + 'scripts', express.static(path.resolve(__dirname, 'frontend', 'scripts')));
app.use(res.locals.baseUrl + 'media', express.static(path.resolve(__dirname, 'frontend', 'media')));

    Este nuevo middleware agrega una variable llamada baseUrl a los locales de la respuesta que contiene la ruta base de URL de la solicitud actual. Esta variable baseUrl se utiliza luego para establecer la ruta URL correcta para servir los archivos estáticos. Al utilizar la variable res.locals.baseUrl, las URL de los archivos estáticos serán relativas a la ruta URL solicitada, en lugar de ser URL absolutas.

Comments are closed.