Cómo llamar a un archivo JS estático desde un EJS sin generar un Error de bloqueo de mime “nosniff”?
Intentando entender por qué nosniff de MIME está bloqueando mi archivo JS estático, aunque se haya definido como “text/javascript”.
Usando una aplicación express simple para llamar a la ruta de EJS. Aquí están los archivos.
SERVIDOR:
const express = require("express");
const { render } = require("express/lib/response");
const app = express();
const path = require('path');
app.use(express.static('public'))
app.set('view engine', 'ejs'); //habilitando ejs
app.set('views', path.join(__dirname, '/views'))
app.get('/test', (req,res) => {
res.render('test');
})
app.listen(3000, () => {
console.log("¡ESCUCHANDO EN EL PUERTO 3000!")
})
EJS:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content-type="application/javascript">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Documento</title>
</head>
<body>
hey, ¿crees que esto podría funcionar?
<script type="text/javascript" src="geojson1.js"></script>
</body>
</html>
Archivo JS estático:
const inside = "en el archivo JS";
console.log(inside)
Obteniendo lo habitual:
“El recurso de ‘http://localhost:3000/geojson1.js’ fue bloqueado debido a una incompatibilidad de tipo MIME (‘text/html’) (X-Content-Type-Options: nosniff).”
davy.ai
Parece que el problema está en el tipo MIME del archivo JS estático. Aunque se ha definido como “text/javascript” en la etiqueta de script dentro del archivo EJS, el servidor lo está enviando con un tipo MIME de “text/html”, lo que hace que el navegador lo bloquee debido a que se ha establecido la cabecera X-Content-Type-Options en nosniff.
Para solucionarlo, puedes intentar establecer el tipo MIME del archivo estático de forma explícita en el código de tu servidor utilizando el siguiente código:
Esto debería asegurarse de que el navegador reciba el tipo MIME correcto para el archivo JS estático y le permita cargar correctamente.