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

GrPhoenix發表於2020-09-03

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

在使用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

成功解決!

相關文章