ทรัพยากรถูกบล็อกเนื่องจากประเภท 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ดั้งเดิมของคุณ ดูคำถามที่พบบ่อย

เราเริ่มต้นหันหน้าไปทางข้อผิดพลาดในการผลิตหลังจากที่ทีมของเรา DevOps X-Content-Type-Options: nosniffการเปลี่ยนแปลงการกำหนดค่าเว็บเซิร์ฟเวอร์โดยการเพิ่ม ด้วยเหตุนี้เบราว์เซอร์จึงถูกบังคับให้ตีความทรัพยากรตามที่กล่าวไว้ในcontent-typeพารามิเตอร์ของส่วนหัวการตอบสนอง

ตั้งแต่เริ่มต้นแอปพลิเคชันเซิร์ฟเวอร์ของเราได้ตั้งค่าประเภทเนื้อหาของไฟล์ js อย่างชัดเจนเป็นไฟล์text/plain. เนื่องจากX-Content-Type-Options: nosniffไม่ได้ตั้งค่าในเว็บเซิร์ฟเวอร์เบราว์เซอร์จึงตีความไฟล์ js เป็นไฟล์ JavaScript โดยอัตโนมัติแม้ว่าจะระบุประเภทเนื้อหาเป็นข้อความ / ธรรมดา สิ่งนี้เรียกว่าการดมกลิ่นแบบ MIME ตอนนี้หลังจากตั้งค่า X-Content-Type-Options: nosniff เบราว์เซอร์ถูกบังคับให้ไม่ทำการดมกลิ่นแบบ MIME และรับประเภทเนื้อหาตามที่กล่าวไว้ในส่วนหัวการตอบกลับ ด้วยเหตุนี้มันจึงตีความไฟล์ js เป็นไฟล์ข้อความธรรมดาและถูกปฏิเสธที่จะดำเนินการหรือบล็อกไฟล์เหล่านั้น สิ่งเดียวกันนี้ปรากฏในข้อผิดพลาดของคุณ

วิธีแก้ไข: คือการทำให้เซิร์ฟเวอร์ของคุณตั้งค่าcontent-typeไฟล์ JS เป็น

application/javascript;charset=utf-8

วิธีนี้จะโหลดไฟล์ JS ทั้งหมดตามปกติและปัญหาจะได้รับการแก้ไข

ตรวจสอบเส้นทางของคุณข้อผิดพลาดนี้จะเกิดขึ้นหากไม่มีไฟล์อยู่ในเส้นทางที่กำหนด

คุณใช้ express หรือเปล่า?

ตรวจสอบเส้นทางของคุณ (สังเกต " /" หลัง / สาธารณะ /):

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>

ฉันได้แก้ไขปัญหานี้โดยการเปลี่ยน charset ในไฟล์ js จาก UTF-8 ที่ไม่มี BOM เป็น UTF-8 แบบธรรมดาใน Notepad ++

ฉันมีข้อผิดพลาดนี้เมื่อฉันใช้ที่เก็บข้อมูลสีฟ้าเป็นเว็บไซต์แบบคงที่ไฟล์ js ที่คัดลอกมีประเภทเนื้อหาเป็นtext/plain; charset=utf-8และฉันเปลี่ยนประเภทเนื้อหาเป็นapplication/javascript

มันเริ่มทำงาน

โปรดดูโปรโตคอล HTTPS และ HTTP

บางครั้งหากคุณใช้โปรโตคอลแบบผสม [ซึ่งส่วนใหญ่เกิดขึ้นกับการเรียกกลับ JSONP] คุณจะพบข้อผิดพลาดนี้

ตรวจสอบให้แน่ใจว่าทั้งหน้าเว็บและหน้าทรัพยากรมีโปรโตคอล HTTP เดียวกัน

ฉันประสบปัญหาเดียวกันนี้ในเซิร์ฟเวอร์ django ดังนั้นฉันจึงเปลี่ยน DEBUG = True ในไฟล์ settings.py ที่ใช้งานได้

มันเกิดขึ้นกับฉันสำหรับแท็กผิด โดยไม่ได้ตั้งใจฉันเพิ่มไฟล์ js ในlinkแท็ก

ตัวอย่าง: (The Wrong One)

<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