Tài nguyên bị chặn do loại MIME không khớp (X-Content-Type-Options: nosniff)

Tôi đang phát triển một trang web bằng JavaScript và HTML, mọi thứ đều hoạt động tốt khi tôi nhận được danh sách lỗi này từ trang HTML của mình:

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

Những lỗi này xuất hiện sau khi cập nhật trình duyệt tự động (Mozilla Firefox), có thể một cái gì đó đã được thay đổi trong thiết lập. Bạn có biết cách nào để giải quyết vấn đề này không?

Kiểm tra xem đường dẫn tệp có đúng không và tệp tồn tại - trong trường hợp của tôi, đó là sự cố - khi tôi sửa nó, lỗi đã biến mất

Điều này có thể được khắc phục bằng cách thay đổi URL của bạn, ví dụ xấu:

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

Ví dụ tốt:

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

rawgit.com là một dịch vụ proxy bộ nhớ đệm cho github. Bạn cũng có thể truy cập vào đó và lấy ra một URL tương ứng cho URL raw.githubusercontent.com ban đầu của bạn . Xem Câu hỏi thường gặp về nó

Chúng tôi bắt đầu gặp phải lỗi này trong quá trình sản xuất sau khi nhóm devops của chúng tôi thay đổi cấu hình máy chủ web bằng cách thêm X-Content-Type-Options: nosniff. Bây giờ, do đó, trình duyệt buộc phải diễn giải các tài nguyên như nó đã được đề cập trong content-typetham số của tiêu đề phản hồi.

Bây giờ, ngay từ đầu, máy chủ ứng dụng của chúng tôi đã thiết lập rõ ràng loại nội dung của các tệp js là text/plain. Vì, X-Content-Type-Options: nosniffkhông được đặt trong máy chủ web, trình duyệt đã tự động diễn giải các tệp js thành tệp JavaScript mặc dù kiểu nội dung được đề cập là văn bản / thuần túy. Đây được gọi là đánh hơi MIME. Bây giờ, sau khi thiết lập X-Content-Type-Options: nosniff, trình duyệt buộc phải không thực hiện việc dò tìm MIME và lấy loại nội dung như đã đề cập trong tiêu đề phản hồi. Do đó, nó đã giải thích các tệp js là tệp văn bản thuần túy và từ chối thực thi chúng hoặc chặn chúng. Điều tương tự cũng được hiển thị trong các lỗi của bạn.

Giải pháp: là làm cho máy chủ của bạn đặt content-typetệp JS là

application/javascript;charset=utf-8

Bằng cách này, nó sẽ tải tất cả các tệp JS bình thường và sự cố sẽ được giải quyết.

kiểm tra đường dẫn của bạn, lỗi này sẽ xuất hiện nếu tệp không tồn tại trong đường dẫn nhất định.

Bạn đang sử dụng express?

Kiểm tra đường dẫn của bạn (lưu ý " /" sau / public /):

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

// lưu ý: bạn không cần "/" trước "css" vì nó đã được bao gồm ở trên:

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

Hi vọng điêu nay co ich

Đối với Wordpress

Trong trường hợp của tôi, tôi vừa bỏ lỡ dấu gạch chéo "/" sau get_template_directory_uri () nên đường dẫn được tạo / tạo bị sai:

Mã sai của tôi:

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

Mã đã sửa của tôi:

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

Điều này có thể là do trình duyệt không thể truy cập tệp. Tôi đã vấp phải loại lỗi này khi tạo ứng dụng với node.js. Bạn có thể thử yêu cầu trực tiếp tệp script (sao chép và dán url) và xem liệu bạn có thể truy xuất tệp đó không. Bạn có thể thấy vấn đề thực sự là gì. Có thể là do sự cho phép của thư mục chứa tệp, hoặc trình duyệt không thể tìm thấy tệp do đường dẫn đến tệp không chính xác. Trong node.js, sau khi chỉ định đường đến tệp, tất cả đều hoạt động.

Nó có thể là một con đường sai lầm. Đảm bảo trong tệp ứng dụng chính của bạn, bạn có:

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

Ví dụ liên kết đến css của bạn như:

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

tương tự cho liên kết đến tệp js:

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

Tôi đã giải quyết vấn đề này bằng cách thay đổi bộ ký tự trong tệp js từ UTF-8 không có BOM thành UTF-8 đơn giản trong Notepad ++

Tôi đã gặp lỗi này khi tôi đang sử dụng bộ nhớ azure làm trang web tĩnh, các tệp js được sao chép có loại nội dung là text/plain; charset=utf-8và tôi đã thay đổi loại nội dung thànhapplication/javascript

Nó bắt đầu hoạt động.

Xem các giao thức HTTPS và HTTP

Đôi khi nếu bạn đang sử dụng các giao thức hỗn hợp [điều này chủ yếu xảy ra với các lệnh gọi lại JSONP], bạn có thể gặp phải LỖI này.

Đảm bảo rằng cả trang web và trang tài nguyên đều có giao thức HTTP giống nhau.

tôi cũng gặp phải vấn đề tương tự này trong máy chủ django. Vì vậy, tôi đã thay đổi DEBUG = True trong tệp settings.py hoạt động của nó

Nó đã xảy ra với tôi vì thẻ sai. Do nhầm lẫn, tôi thêm tệp js vào linkthẻ.

Ví dụ: (The Wrong One)

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

Nó được giải quyết bằng cách sử dụng đúng thẻ cho javascript. Thí dụ:

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

https://cdn.rawgit.com sắp ngừng hoạt động. Do đó, một trong các tùy chọn thay thế có thể được sử dụng. JSDeliver là một cdn miễn phí có thể được sử dụng.

// tải bất kỳ bản phát hành, cam kết hoặc chi nhánh nào của GitHub

// lưu ý: chúng tôi khuyên bạn nên sử dụng npm cho các dự án hỗ trợ nó

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

// tải jQuery v3.2.1

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

// sử dụng phạm vi phiên bản thay vì một phiên bản cụ thể

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

// bỏ qua hoàn toàn phiên bản để lấy phiên bản mới nhất

// bạn KHÔNG nên sử dụng cái này trong sản xuất

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

// thêm ".min" vào bất kỳ tệp JS / CSS nào để có phiên bản rút gọn

// nếu không tồn tại, chúng tôi sẽ tạo nó cho bạn

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

// thêm / vào cuối để nhận danh sách thư mục

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

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