Ресурс заблокирован из-за несоответствия типа MIME (X-Content-Type-Options: nosniff)

Я разрабатываю веб-страницу с использованием JavaScript и HTML, все работало хорошо, когда я получил этот список ошибок со своей 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).

Эти ошибки появились после автоматического обновления браузера (Mozilla Firefox), возможно, что-то было изменено в настройке. Вы знаете, как решить эту проблему?

Убедитесь, что путь к файлу правильный и файл существует - в моем случае это была проблема - когда я ее исправил, ошибка исчезла

Это можно исправить, изменив URL-адрес, например, плохой:

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

Пример хороший:

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

rawgit.com - это кеширующий прокси-сервер для github. Вы также можете перейти туда и в интерактивном режиме получить соответствующий URL-адрес для исходного URL-адреса raw.githubusercontent.com . Смотрите его FAQ

Мы начали сталкиваться с этой ошибкой на производстве после того, как наша команда DevOps изменила конфигурацию веб-сервера, добавив X-Content-Type-Options: nosniff. Теперь из-за этого браузер был вынужден интерпретировать ресурсы так, как это было указано в content-typeпараметре заголовков ответа.

Теперь, с самого начала, наш сервер приложений явно устанавливал тип содержимого js-файлов как text/plain. Поскольку, X-Content-Type-Options: nosniffне было установлено на веб-сервере, браузер автоматически интерпретировал файлы js как файлы JavaScript, хотя тип содержимого был упомянут как text / plain. Это называется MIME-сниффингом. Теперь, после установки X-Content-Type-Options: nosniff, браузер был вынужден не выполнять MIME-сниффинг и принимать тип содержимого, как указано в заголовках ответов. Из-за этого он интерпретировал файлы js как простые текстовые файлы и отказывался выполнять их или блокировал их. То же самое и в ваших ошибках.

Решение: сделать так, чтобы ваш сервер устанавливал content-typeфайлы JS как

application/javascript;charset=utf-8

Таким образом, он загрузит все файлы JS как обычно, и проблема будет решена.

проверьте свой путь, эта ошибка появится, если файл не существует по указанному пути.

Вы пользуетесь экспрессом?

Проверьте свой путь (обратите внимание на " /" после / public /):

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

// примечание: вам не нужно "/" перед "css", потому что он уже включен выше:

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

Надеюсь это поможет

Для Wordpress

В моем случае я просто пропустил косую черту "/" после get_template_directory_uri (), поэтому полученный / сгенерированный путь был неправильным:

Мой неправильный код:

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

Мой исправленный код:

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

Это может быть связано с тем, что браузер не может получить доступ к файлу. Я столкнулся с этой ошибкой при создании приложения с помощью node.js. Вы можете попробовать напрямую запросить файл сценария (копирование и вставка URL-адреса) и посмотреть, сможете ли вы его получить. Тогда вы можете увидеть, в чем настоящая проблема. Это может быть из-за разрешения папки, в которой находится файл, или браузер просто не может найти его из-за неправильного пути к нему. В node.js после указания маршрута к файлу все работает.

Возможно, это неправильный путь. Убедитесь, что в основном файле приложения у вас есть:

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

Пример ссылки на ваш CSS как:

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

аналогично для ссылки на файлы js:

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

Я решил эту проблему, изменив кодировку в js-файлах с UTF-8 без спецификации на простой UTF-8 в Notepad ++.

У меня была эта ошибка, когда я использовал хранилище Azure в качестве статического веб-сайта, скопированные файлы js имели тип содержимого, text/plain; charset=utf-8и я изменил тип содержимого наapplication/javascript

Это начало работать.

См. Протоколы HTTPS и HTTP

Иногда, если вы используете смешанные протоколы [это происходит в основном с обратными вызовами JSONP], вы можете получить эту ОШИБКУ.

Убедитесь, что и веб-страница, и страница ресурса имеют одинаковые протоколы HTTP.

Я также столкнулся с той же проблемой на сервере django, поэтому я изменил DEBUG = True в файле settings.py, который работает

Это случилось со мной из-за неправильного тега. По ошибке я добавляю js-файл в linkтег.

Пример: (Не тот)

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

Это было решено с помощью правильного тега для javascript. Пример:

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

https://cdn.rawgit.com закрывается. Таким образом, можно использовать один из альтернативных вариантов. JSDeliver - это бесплатный компакт-диск, который можно использовать.

// загружаем любой выпуск, коммит или ветку GitHub

// примечание: мы рекомендуем использовать npm для проектов, которые его поддерживают

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

// загружаем jQuery v3.2.1

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

// использовать диапазон версий вместо конкретной версии

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

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

// полностью опускаем версию, чтобы получить последнюю

// вы НЕ должны использовать это в производстве

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

// добавляем ".min" в любой файл JS / CSS, чтобы получить уменьшенную версию

// если его не существует, мы сгенерируем его для вас

https://cdn.jsdelivr.net/gh/jquery/jquery@3.2.1/src/core.min.js

// добавляем / в конце, чтобы получить список каталогов

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

ссылка - https://www.jsdelivr.com/?docs=gh