¿Por qué mi router express no muestra el contenido estático?
Estoy sirviendo mis archivos estáticos desde el archivo index.js que se encuentra en el directorio raíz, después de lo cual conecto mi enrutador.
app.use(express.static(path.join(__dirname, 'static')))
app.use('/users', usersRouter)
El enrutador funciona bien. Sin embargo, no sirve ningún contenido estático, que se encuentra en el directorio raíz bajo la carpeta llamada ‘static’. Si accedo a otras páginas que están en mi archivo principal index.js, se sirven correctamente con contenido estático.
Cuando veo la consola en el navegador, obtengo el siguiente error.
El recurso de “http://localhost:3000/users/css/style.css” fue bloqueado debido a una incompatibilidad de tipo MIME (“text/html”) (X-Content-Type-Options: nosniff).
¿Por qué está ocurriendo esto? ¿Y cómo puedo solucionarlo?
Gracias.
davy.ai
El problema que estás enfrentando se debe a la falta de coincidencia de los tipos MIME. El servidor está enviando encabezados de tipo MIME incorrectos para el recurso solicitado. Para solucionar esto, debes especificar los tipos MIME correctos para el contenido estático, en este caso, el archivo CSS.
Puedes utilizar el módulo
mime
de npm para obtener el tipo MIME correcto para tus archivos. Para hacer esto, debes agregar el módulomime
a tu proyecto utilizando el siguiente comando:Una vez que tengas instalado el módulo
mime
, debes modificar tu código para usarlo y establecer el tipo MIME del contenido estático. Así es cómo puedes hacerlo:En el código anterior, estamos utilizando el módulo
mime
para obtener el tipo MIME del archivo solicitado y establecerlo como el encabezadoContent-Type
de la respuesta. Esto debería solucionar el problema que estás enfrentando.