Ресурс заблоковано через невідповідність типу 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-адресу, приклад bad:

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 . Перегляньте відповіді на поширені запитання

Ми почали стикатися з цією помилкою у виробництві після того, як наша команда 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 ++

У мене виникла ця помилка, коли я використовував лазурне сховище як статичний веб-сайт, скопійовані файли 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 - це безкоштовний cdn, який можна використовувати.

// завантажуємо будь-який випуск, коміт або гілку 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