Recurso bloqueado debido a una falta de coincidencia de tipo MIME (X-Content-Type-Options: nosniff)

Estoy desarrollando una página web usando JavaScript y HTML, todo funcionaba bien cuando recibí esta lista de errores de mi página HTML:

The resource from “https://raw.githubusercontent.com/dataarts/dat.gui/master/build/dat.gui.min.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/CanvasRenderer.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/master/examples/js/renderers/Projector.js”
  was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).
The resource from “https://raw.githubusercontent.com/mrdoob/three.js/dev/build/three.js” was
  blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

Estos errores aparecieron después de una actualización automática del navegador (Mozilla Firefox), es posible que algo haya cambiado en la configuración. ¿Conoces alguna forma de solucionar este problema?

Verifique si la ruta del archivo es correcta y el archivo existe, en mi caso ese fue el problema, cuando lo solucioné, el error desapareció

Esto se puede solucionar cambiando su URL, ejemplo malo:

https://raw.githubusercontent.com/svnpenn/bm/master/yt-dl/yt-dl.js
Content-Type: text/plain; charset=utf-8

Buen ejemplo:

https://cdn.rawgit.com/svnpenn/bm/master/yt-dl/yt-dl.js
content-type: application/javascript;charset=utf-8

rawgit.com es un servicio de proxy de almacenamiento en caché para github. También puede ir allí y derivar interactivamente una URL correspondiente para su URL original raw.githubusercontent.com . Ver sus preguntas frecuentes

Comenzamos a enfrentar este error en producción después de que nuestro equipo de devops cambiara la configuración del servidor web agregando X-Content-Type-Options: nosniff. Ahora, debido a esto, el navegador se vio obligado a interpretar los recursos como se mencionó en el content-typeparámetro de encabezados de respuesta.

Ahora, desde el principio, nuestro servidor de aplicaciones establecía explícitamente el tipo de contenido de los archivos js como text/plain. Dado que, X-Content-Type-Options: nosniffno se configuró en el servidor web, el navegador interpretó automáticamente los archivos js como archivos JavaScript, aunque el tipo de contenido se mencionó como texto / plano. Esto se llama olfateo MIME. Ahora, después de configurar X-Content-Type-Options: nosniff, el navegador se vio obligado a no realizar el rastreo de MIME y tomar el tipo de contenido como se menciona en los encabezados de respuesta. Debido a esto, interpretó los archivos js como archivos de texto sin formato y se negó a ejecutarlos o los bloqueó. Lo mismo se muestra en sus errores.

Solución: es hacer que su servidor configure los content-typearchivos JS como

application/javascript;charset=utf-8

De esta manera, cargará todos los archivos JS normalmente y el problema se resolverá.

Verifique su ruta, este error vendrá si el archivo no existía en la ruta dada.

¿Estás usando express?

Compruebe su ruta (observe el " /" después de / public /):

app.use(express.static(__dirname + "/public/"));

// nota: no necesita "/" antes de "css" porque ya está incluido arriba:

rel="stylesheet" href="css/style.css

Espero que esto ayude

Para Wordpress

En mi caso, simplemente me perdí la barra "/" después de get_template_directory_uri (), por lo que la ruta resultante / generada era incorrecta:

Mi código incorrecto:

wp_enqueue_script( 'retina-js', get_template_directory_uri().'js/retina.min.js' ); 

Mi código corregido:

wp_enqueue_script( 'retina-js', get_template_directory_uri().'/js/retina.min.js' );

Esto puede deberse a que el navegador no puede acceder a un archivo. Me encontré con este tipo de error al crear una aplicación con node.js. Puede intentar solicitar directamente el archivo de secuencia de comandos (copiando y pegando la URL) y ver si puede recuperarlo. Entonces puede ver cuál es el verdadero problema. Puede deberse al permiso de la carpeta en la que se encuentra el archivo, o el navegador simplemente no puede encontrarlo debido a una ruta incorrecta. En node.js, después de especificar la ruta al archivo, todo funciona.

Puede que sea un camino equivocado. Asegúrese de que en el archivo de su aplicación principal tenga:

app.use(express.static(path.join(__dirname,"public")));

Enlace de ejemplo a su css como:

<link href="/css/clean-blog.min.css" rel="stylesheet">

similar para el enlace a los archivos js:

<script src="/js/clean-blog.min.js"></script>

Resolví este problema cambiando el juego de caracteres en archivos js de UTF-8 sin BOM a UTF-8 simple en Notepad ++

Tuve este error cuando estaba usando el almacenamiento azul como un sitio web estático, los archivos js que se copiaron tenían el tipo de contenido como text/plain; charset=utf-8y cambié el tipo de contenido aapplication/javascript

Empezó a funcionar.

Consulte los protocolos HTTPS y HTTP.

A veces, si está utilizando protocolos mixtos [esto sucede principalmente con devoluciones de llamada JSONP], puede terminar en este ERROR.

Asegúrese de que tanto la página web como la página de recursos tengan los mismos protocolos HTTP.

También me enfrento a este mismo problema en el servidor django, así que cambié DEBUG = True en el archivo settings.py, está funcionando

Me pasó por etiqueta incorrecta. Por error agrego el archivo js en la linketiqueta.

Ejemplo: (el equivocado)

<link rel="stylesheet" href="plugins/timepicker/bootstrap-timepicker.min.js">

Se solucionó usando la etiqueta correcta para javascript. Ejemplo:

<script src="plugins/timepicker/bootstrap-timepicker.min.js"></script>

https://cdn.rawgit.com se está cerrando. Por tanto, se puede utilizar una de las opciones alternativas. JSDeliver es un cdn gratuito que se puede utilizar.

// cargar cualquier versión, confirmación o rama de GitHub

// nota: recomendamos usar npm para proyectos que lo admitan

https://cdn.jsdelivr.net/gh/user/repo@version/file

// carga jQuery v3.2.1

https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js

// usa un rango de versiones en lugar de una versión específica

https://cdn.jsdelivr.net/gh/jquery/[email protected]/dist/jquery.min.js

https://cdn.jsdelivr.net/gh/jquery/jquery@3/dist/jquery.min.js

// omite la versión por completo para obtener la última

// NO deberías usar esto en producción

https://cdn.jsdelivr.net/gh/jquery/jquery/dist/jquery.min.js

// agregue ".min" a cualquier archivo JS / CSS para obtener una versión reducida

// si no existe uno, lo generaremos para usted

https://cdn.jsdelivr.net/gh/jquery/[email protected]/src/core.min.js

// agrega / al final para obtener una lista de directorios

https://cdn.jsdelivr.net/gh/jquery/jquery/

ref - https://www.jsdelivr.com/?docs=gh