Resource diblokir karena ketidakcocokan jenis MIME (X-Content-Type-Options: nosniff)

Saya mengembangkan halaman web menggunakan JavaScript dan HTML, semuanya bekerja dengan baik ketika saya menerima daftar kesalahan ini dari halaman HTML saya:

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).

Kesalahan ini muncul setelah pembaruan browser otomatis (Mozilla Firefox), mungkin ada sesuatu yang telah diubah dalam pengaturan. Apakah Anda tahu cara untuk mengatasi masalah ini?

Periksa apakah jalur file sudah benar dan file tersebut ada - dalam kasus saya itulah masalahnya - saat saya memperbaikinya, kesalahan tersebut menghilang

Ini dapat diperbaiki dengan mengubah URL Anda, contoh buruk:

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

Contoh yang baik:

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

rawgit.com adalah layanan proxy caching untuk github. Anda juga dapat pergi ke sana dan secara interaktif mendapatkan URL yang sesuai untuk URL raw.githubusercontent.com asli Anda . Lihat FAQ -nya

Kami mulai menghadapi kesalahan ini dalam produksi setelah tim pengembang kami mengubah konfigurasi server web dengan menambahkan X-Content-Type-Options: nosniff. Sekarang, karena ini, browser terpaksa menafsirkan sumber daya seperti yang disebutkan dalam content-typeparameter header respons.

Sekarang, dari awal, server aplikasi kami secara eksplisit mengatur tipe konten dari file js sebagai text/plain. Karena, X-Content-Type-Options: nosnifftidak disetel di server web, browser secara otomatis menafsirkan file js sebagai file JavaScript meskipun tipe konten disebutkan sebagai teks / biasa. Ini disebut sebagai MIME-sniffing. Sekarang, setelah menyetel X-Content-Type-Options: nosniff, browser dipaksa untuk tidak melakukan MIME-sniffing dan mengambil jenis konten seperti yang disebutkan di header respon. Karena ini, itu menafsirkan file js sebagai file teks biasa dan menolak untuk mengeksekusinya atau memblokirnya. Hal yang sama ditampilkan dalam kesalahan Anda.

Solusi: adalah membuat server Anda menetapkan content-typefile JS sebagai

application/javascript;charset=utf-8

Dengan cara ini, ini akan memuat semua file JS secara normal dan masalah akan teratasi.

periksa jalur Anda, kesalahan ini akan datang jika file tidak ada di jalur yang diberikan.

Apakah Anda menggunakan ekspres?

Periksa jalur Anda (perhatikan " /" setelah / publik /):

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

// note: Anda tidak memerlukan "/" sebelum "css" karena sudah termasuk di atas:

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

Semoga ini membantu

Untuk Wordpress

Dalam kasus saya, saya baru saja melewatkan garis miring "/" setelah get_template_directory_uri () sehingga jalur yang dihasilkan / dihasilkan salah:

Kode saya salah:

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

Kode Koreksi Saya:

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

Ini mungkin karena browser tidak dapat mengakses file. Saya tersandung dengan jenis kesalahan ini saat membuat aplikasi dengan node.js. Anda dapat mencoba untuk meminta file skrip secara langsung (menyalin dan menempelkan url) dan melihat apakah Anda dapat mengambilnya. Anda bisa melihat apa masalah sebenarnya. Bisa jadi karena izin folder tempat file tersebut berada, atau browser tidak dapat menemukannya karena jalur yang salah. Di node.js, setelah menentukan rute ke file, semuanya berfungsi.

Ini mungkin jalan yang salah. Pastikan dalam file aplikasi utama Anda memiliki:

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

Contoh tautan ke css Anda sebagai:

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

serupa untuk tautan ke file js:

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

Saya telah memecahkan masalah ini dengan mengubah charset di js-files dari UTF-8 tanpa BOM ke UTF-8 sederhana di Notepad ++

Saya mengalami kesalahan ini ketika saya menggunakan penyimpanan azure sebagai situs web statis, file js yang disalin memiliki tipe konten seperti text/plain; charset=utf-8dan saya mengubah tipe konten menjadiapplication/javascript

Ini mulai bekerja.

Lihat protokol HTTPS dan HTTP

Kadang-kadang jika Anda menggunakan protokol campuran [ini kebanyakan terjadi dengan panggilan balik JSONP] Anda bisa berakhir di ERROR ini.

Pastikan halaman web dan halaman sumber memiliki protokol HTTP yang sama.

Saya juga menghadapi masalah yang sama di server django. Jadi saya mengubah DEBUG = True di file settings.py itu berfungsi

Itu terjadi pada saya karena tag salah. Secara tidak sengaja saya menambahkan file js di linktag.

Contoh: (The Wrong One)

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

Ini diselesaikan dengan menggunakan tag yang benar untuk javascript. Contoh:

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

https://cdn.rawgit.com dimatikan. Dengan demikian, salah satu opsi alternatif dapat digunakan. JSDeliver adalah cdn gratis yang dapat digunakan.

// muat rilis, komit, atau cabang GitHub apa pun

// note: kami merekomendasikan penggunaan npm untuk proyek yang mendukungnya

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

// muat jQuery v3.2.1

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

// gunakan rentang versi, bukan versi tertentu

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

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

// hilangkan versi sepenuhnya untuk mendapatkan yang terbaru

// Anda TIDAK boleh menggunakan ini dalam produksi

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

// tambahkan ".min" ke file JS / CSS mana pun untuk mendapatkan versi yang diperkecil

// jika tidak ada, kami akan membuatnya untuk Anda

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

// tambahkan / di akhir untuk mendapatkan daftar direktori

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

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