Recurso bloqueado devido a incompatibilidade de tipo MIME (X-Content-Type-Options: nosniff)

Estou desenvolvendo uma página da web usando JavaScript e HTML, tudo estava funcionando bem quando recebi esta lista de erros da minha 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).

Esses erros apareceram após uma atualização automática do navegador (Mozilla Firefox), pode ser que algo foi alterado na configuração. Você conhece alguma maneira de resolver este problema?

Verifique se o caminho do arquivo está correto e se o arquivo existe - no meu caso, esse era o problema - quando eu corrigi, o erro desapareceu

Isso pode ser corrigido alterando seu URL, por exemplo:

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

Bom exemplo:

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

rawgit.com é um serviço de cache de proxy para github. Você também pode ir lá e derivar interativamente um URL correspondente para o URL original raw.githubusercontent.com . Veja seu FAQ

Começamos a enfrentar esse erro na produção depois que nossa equipe de devops alterou a configuração do servidor web adicionando X-Content-Type-Options: nosniff. Agora, devido a isso, o navegador foi forçado a interpretar os recursos conforme mencionado no content-typeparâmetro dos cabeçalhos de resposta.

Agora, desde o início, nosso servidor de aplicativos estava definindo explicitamente o tipo de conteúdo dos arquivos js como text/plain. Como, X-Content-Type-Options: nosniffnão foi definido no servidor da web, o navegador estava interpretando automaticamente os arquivos js como arquivos JavaScript, embora o tipo de conteúdo tenha sido mencionado como texto / simples. Isso é chamado de detecção de MIME. Agora, depois de definir X-Content-Type-Options: nosniff, o navegador foi forçado a não fazer o MIME-sniffing e pegar o content-type conforme mencionado nos cabeçalhos de resposta. Devido a isso, ele interpretou os arquivos js como arquivos de texto simples e negou executá-los ou bloqueou-os. O mesmo é mostrado em seus erros.

Solução: é fazer com que seu servidor defina os content-typearquivos JS como

application/javascript;charset=utf-8

Dessa forma, ele carregará todos os arquivos JS normalmente e o problema será resolvido.

verifique o seu caminho, este erro virá se o arquivo não existir no caminho fornecido.

Você está usando o expresso?

Verifique o seu caminho (observe o " /" após / public /):

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

// observação: você não precisa do "/" antes de "css" porque já está incluído acima:

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

Espero que isto ajude

Para Wordpress

No meu caso, perdi a barra "/" após get_template_directory_uri (), então o caminho resultante / gerado estava errado:

Meu código errado:

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

Meu código corrigido:

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

Isso pode ocorrer porque o navegador não pode acessar um arquivo. Tropecei com este tipo de erro ao criar um aplicativo com node.js. Você pode tentar solicitar diretamente o arquivo de script (copiando e colando url) e ver se você pode recuperá-lo. Você pode ver então qual é o verdadeiro problema. Pode ser por causa da permissão da pasta na qual o arquivo está localizado, ou o navegador simplesmente não consegue localizá-lo devido ao caminho incorreto para ele. Em node.js, após especificar a rota para o arquivo, tudo funciona.

Pode ser um caminho errado. Certifique-se de que no arquivo principal do seu aplicativo você tenha:

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

Exemplo de link para seu css como:

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

semelhante para link para arquivos js:

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

Resolvi esse problema alterando o conjunto de caracteres em js-files de UTF-8 sem BOM para UTF-8 simples no Notepad ++

Eu tive este erro quando estava usando o armazenamento azure como um site estático, os arquivos js que são copiados tinham o tipo de conteúdo como text/plain; charset=utf-8e eu alterei o tipo de conteúdo paraapplication/javascript

Começou a funcionar.

Veja para os protocolos HTTPS e HTTP

Às vezes, se você estiver usando protocolos mistos [isso acontece principalmente com retornos de chamada JSONP], você pode acabar neste ERROR.

Certifique-se de que a página da web e a página de recursos tenham os mesmos protocolos HTTP.

Eu também estou enfrentando este mesmo problema no servidor django. Então eu mudei DEBUG = True no arquivo settings.py está funcionando

Aconteceu comigo por tag errada. Por engano adiciono o arquivo js na linktag.

Exemplo: (o errado)

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

Foi resolvido usando a tag correta para javascript. Exemplo:

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

https://cdn.rawgit.com está sendo encerrado. Assim, uma das opções alternativas pode ser usada. JSDeliver é um cdn gratuito que pode ser usado.

// carregue qualquer versão, confirmação ou branch do GitHub

// observação: recomendamos o uso do npm para projetos que o suportam

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

// carregar jQuery v3.2.1

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

// use um intervalo de versão em vez de uma versão 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 a versão completamente para obter a mais recente

// você NÃO deve usar isso na produção

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

// adicione ".min" a qualquer arquivo JS / CSS para obter uma versão reduzida

// se não existir, nós o geraremos para você

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

// adicione / no final para obter uma lista de diretórios

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

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