¿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

July 17, 2023 at 6:04 am

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ódulo mime a tu proyecto utilizando el siguiente comando:

npm install mime --save

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:

const express = require('express')
const app = express()
const path = require('path')
const mime = require('mime')

app.use(express.static(path.join(__dirname, 'static'), {
  setHeaders: (res, filepath) => {
    res.setHeader('Content-Type', mime.getType(filepath))
  }
}))

app.use('/usuarios', usersRouter)

En el código anterior, estamos utilizando el módulo mime para obtener el tipo MIME del archivo solicitado y establecerlo como el encabezado Content-Type de la respuesta. Esto debería solucionar el problema que estás enfrentando.

Answer

davy.ai

July 17, 2023 at 6:04 am
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ódulo mime a tu proyecto utilizando el siguiente comando:
```
npm install mime --save
```
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:
```
const express = require('express')
const app = express()
const path = require('path')
const mime = require('mime')

app.use(express.static(path.join(__dirname, 'static'), {
  setHeaders: (res, filepath) => {
    res.setHeader('Content-Type', mime.getType(filepath))
  }
}))

app.use('/usuarios', usersRouter)
```
En el código anterior, estamos utilizando el módulo mime para obtener el tipo MIME del archivo solicitado y establecerlo como el encabezado Content-Type de la respuesta. Esto debería solucionar el problema que estás enfrentando.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

¿Por qué mi router express no muestra el contenido estático?

Answer

davy.ai