谷歌,火狐提示來自"http://xxx.com/file"的資源已被阻止,因為 MIME 類型("text/plain")不匹配(X-Content-Type-Options: nosniff)


一、認識到這不是我代碼的問題,是服務器傳輸過程中瀏覽器不支持的問題:

在使用ueditor編輯的過程中無法上傳圖片,谷歌火狐瀏覽器提示Cross-Origin Read Blocking (CORB) blocked cross-origin response http://XXX?action=config&callback=bd__editor__dkhbuv with MIME type text/plain,怎么解決?
查看該文件請求,發現服務器返回頭中多了這么個玩意 X-Content-Type-Options: nosniff,這個是什么意思呢?

 

 

 查閱資料X-Content-Type-Options: nosniff,文檔:https://developer.mozilla.org/zh-CN/docs/Web/HTTP/Headers/X-Content-Type-Options,看了之后還是有點懵逼。查了資料還是簡單備注下該玩意:

  服務器發送響應頭 "X-Content-Type-Options: nosniff",則 script 和 styleSheet 元素會拒絕包含錯誤的 MIME 類型的響應。這是一種安全功能,有助於防止基於 MIME 類型混淆的攻擊,過濾掉不安全的文件。即服務器發送含有 "X-Content-Type-Options: nosniff" 標頭的響應時,此更改會影響瀏覽器的行為。影響行為如下:

  對於樣式文件:如果通過 styleSheet 參考檢索到的響應中接收到 "nosniff" 指令,則 瀏覽器 不會加載“stylesheet”文件,除非 MIME 類型匹配 "text/css"。

   對於js文件:如果通過 script 參考檢索到的響應中接收到 "nosniff" 指令,則 瀏覽器不會加載"script"文件,除非 MIME 類型匹配以下值之一:

    "application/ecmascript"  或  "application/javascript"   或  "application/x-javascript"   或 "text/ecmascript"  或  "text/javascript"       "text/jscript"     "text/x-javascript"   或  "text/vbs"   或  "text/vbscript"

  

  從上面可以看出對於此問題需要服務器端解決:

    第一種方式:X-Content-Type-Options 頭設置允許加載靜態資源文件

      由於咋后台是用的java 的 springboot ,因此設置  http.headers().contentTypeOptions().disable(); 允許加載靜態資源就可以

    第二種方式

      讓后台改變響應頭:Content-Type: application/javascript ,如下:

 

 二、解決方法

===============>>#1 票數:42

檢查文件路徑是否正確並且文件是否存在 - 在我的情況下是問題 - 當我修復它時,錯誤消失了

===============>>#2 票數:21

這可以通過更改您的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的緩存代理服務。 您還可以轉到此處,以交互方式獲取原始raw.githubusercontent.com URL的相應​​URL。 查看其常見問題

===============>>#3 票數:7

檢查您的路徑,如果文件不存在於給定路徑中,則會出現此錯誤。

===============>>#4 票數:4

在我的情況下,我剛剛錯過了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' );

===============>>#5 票數:2

這可能是因為瀏覽器無法訪問文件。 在使用node.js創建應用程序時,我偶然發現了這種類型的錯誤。 您可以嘗試直接請求腳本文件(復制和粘貼URL),看看是否可以檢索它。 你可以看到真正的問題是什么。 這可能是因為文件所在的文件夾的權限,或者由於路徑不正確而導致瀏覽器無法找到它。 在node.js中,指定路由到文件后,所有工作。

===============>>#6 票數:2

我已經通過將js文件中的字符集從沒有BOM的UTF-8更改為Notepad ++中的簡單UTF-8來解決了這個問題

===============>>#7 票數:2

你在使用快遞嗎?

檢查你的路徑(注意/ public /后面的“ / ”):

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

//注意:在“css”之前你不需要“/”,因為它已經包含在上面:

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

希望這可以幫助

===============>>#8 票數:2

我們的devops團隊通過添加X-Content-Type-Options: nosniff更改了Web服務器配置后,我們開始在生產中遇到此錯誤。 現在,由於這個原因,瀏覽器被迫解釋響應頭的content-type參數中提到的資源。

現在,我們的應用程序服務器從一開始就將js文件的內容類型顯式設置為text/plain 。 由於X-Content-Type-Options: nosniff未在webserver中設置,瀏覽器自動將js文件解釋為JavaScript文件,盡管內容類型被提及為text / plain。 這被稱為MIME嗅探。 現在,在設置X-Content-Type-Options:nosniff之后,瀏覽器被迫不進行MIME嗅探並采用響應頭中提到的內容類型。 因此,它確實將js文件解釋為純文本文件,並拒絕執行它們或阻止它們。 您的錯誤中也會顯示相同的內容。

解決方案:是讓您的服務器將JS文件的content-type設置為

application/javascript;charset=utf-8

這樣,它將正常加載所有JS文件,問題將得到解決。

===============>>#9 票數:1

這可能是一條錯誤的道路。 確保在您的主應用程序文件中:

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>

===============>>#10 票數:0

請參閱HTTPS和HTTP協議

有時,如果您使用混合協議[這主要發生在JSONP回調中],您最終可能會遇到此錯誤。

確保Web頁面和資源頁面都具有相同的HTTP協議。

三、最終我的問題及解決

 

將用到的github文件version.js上傳到博客園文件中:

https://blog-static.cnblogs.com/files/phoenixash/version.js

成功解決!


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM