MIME türü uyuşmazlığı nedeniyle kaynak engellendi (X-Content-Type-Options: nosniff)

JavaScript ve HTML kullanarak bir web sayfası geliştiriyorum, HTML sayfamdan bu hata listesini aldığımda her şey yolunda gidiyordu:

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

Otomatik bir tarayıcı güncellemesinden (Mozilla Firefox) sonra ortaya çıkan bu hatalar, kurulumda bir şey değiştirilmiş olabilir. Bu sorunu çözmenin herhangi bir yolunu biliyor musunuz?

Dosya yolunun doğru olup olmadığını ve dosyanın var olup olmadığını kontrol edin - benim durumumda sorun buydu - ben onu düzelttikçe hata ortadan kalktı

Bu, URL'nizi değiştirerek düzeltilebilir, örneğin kötü:

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

Örnek iyi:

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

rawgit.com , github için bir önbelleğe alma proxy hizmetidir. Ayrıca oraya gidebilir ve etkileşimli olarak orijinal raw.githubusercontent.com URL'niz için karşılık gelen bir URL türetebilirsiniz . SSS bölümüne bakın

Devops ekibimiz web sunucusu yapılandırmasını ekleyerek değiştirdikten sonra üretimde bu hatayla karşılaşmaya başladık X-Content-Type-Options: nosniff. Şimdi, bu nedenle tarayıcı, kaynakları content-typeyanıt başlıkları parametresinde belirtildiği gibi yorumlamak zorunda kaldı .

Şimdi, en başından beri, uygulama sunucumuz js dosyalarının içerik türünü açıkça text/plain. Web X-Content-Type-Options: nosniffsunucusunda ayarlanmadığından, içerik türü metin / düz olarak belirtilmesine rağmen tarayıcı js dosyalarını JavaScript dosyaları olarak otomatik olarak yorumluyordu. Buna MIME-koklama denir. Şimdi, X-Content-Type-Options: nosniff'i ayarladıktan sonra, tarayıcı, MIME-sniffing yapmamaya ve yanıt başlıklarında belirtildiği gibi içerik türünü almaya zorlandı. Bu nedenle, js dosyalarını düz metin dosyaları olarak yorumladı ve yürütmeyi reddetti veya engelledi. Aynısı hatalarınızda da görülmektedir.

Çözüm: Sunucunuzun content-typeJS dosyalarını şu şekilde ayarlamasını sağlamaktır:

application/javascript;charset=utf-8

Bu şekilde, tüm JS dosyalarını normal şekilde yükleyecek ve sorun çözülecektir.

yolunuzu kontrol edin, bu hata, verilen yolda dosya yoksa ortaya çıkar.

Ekspres kullanıyor musunuz?

Yolunuzu kontrol edin ( // public / sonrasına dikkat edin ):

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

// not: "css" den önce "/" işaretine ihtiyacınız yoktur çünkü zaten yukarıda yer almaktadır:

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

Bu yardımcı olur umarım

Wordpress için

Benim durumumda get_template_directory_uri () 'den sonra eğik çizgiyi "/" kaçırdım, bu nedenle sonuçlanan / oluşturulan yol yanlıştı:

Yanlış kodum:

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

Düzeltilmiş Kodum:

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

Bunun nedeni tarayıcının bir dosyaya erişememesi olabilir. Node.js ile uygulama oluştururken bu tür bir hatayla karşılaştım. Doğrudan komut dosyası istemeyi deneyebilir (url'yi kopyalayıp yapıştırarak) ve onu alıp alamayacağınızı görebilirsiniz. O zaman asıl sorunun ne olduğunu görebilirsiniz. Bunun nedeni, dosyanın bulunduğu klasörün izni olabilir veya yanlış yol nedeniyle tarayıcı bulamıyor olabilir. Node.js'de dosyaya giden yolu belirledikten sonra her şey çalışır.

Yanlış bir yol olabilir. Ana uygulama dosyanızda şunlara sahip olduğunuzdan emin olun:

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

CSS'nize örnek bağlantı:

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

js dosyalarına bağlantı için benzer:

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

Bu sorunu, js dosyalarındaki karakter kümesini BOM olmadan UTF-8'den Notepad ++ 'da basit UTF-8'e değiştirerek çözdüm.

Azure depolamayı statik bir web sitesi olarak kullanırken bu hatayı yaşadım, kopyalanan js dosyalarının içerik türü olarak text/plain; charset=utf-8ve içerik türünü şu şekilde değiştirdim:application/javascript

Çalışmaya başladı.

HTTPS ve HTTP protokolleri için bakın

Bazen karma protokoller kullanıyorsanız [bu çoğunlukla JSONP geri aramalarında olur] bu HATA ile sonuçlanabilirsiniz.

Hem web sayfasının hem de kaynak sayfasının aynı HTTP protokollerine sahip olduğundan emin olun.

Ben de django sunucusunda aynı problemle karşılaşıyorum. Bu yüzden DEBUG = True ayarlarında değiştirdim.

Yanlış etiket için başıma geldi. Yanlışlıkla js dosyasını linketikete ekliyorum .

Örnek: (Yanlış Olan)

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

İçin doğru etiketi kullanarak çözüldü javascript. Misal:

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

https://cdn.rawgit.com kapatılıyor. Böylece alternatif seçeneklerden biri kullanılabilir. JSDeliver, kullanılabilen ücretsiz bir cdn'dir.

// herhangi bir GitHub sürümünü, yürütmesini veya dalını yükleyin

// not: onu destekleyen projeler için npm kullanmanızı öneririz

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

// jQuery v3.2.1'i yükle

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

// belirli bir sürüm yerine bir sürüm aralığı kullanın

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

// son sürümü almak için sürümü tamamen çıkarın

// bunu üretimde KULLANMAMALISINIZ

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

// küçültülmüş bir sürüm almak için herhangi bir JS / CSS dosyasına ".min" ekleyin

// yoksa, sizin için üreteceğiz

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

// bir dizin listesi almak için sonuna / ekleyin

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

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