CSS文件被阻止：MIME類型不匹配（X-Content-Type-Options：nosniff）

我正在開發一個Angular 4應用程序，我想應用一些全局樣式。繼tutorial at the angular site，我創建我的應用程序的根目錄下的「styles.css的」文件，我指的是樣式表在我的應用程序中的index.html：CSS文件被阻止：MIME類型不匹配（X-Content-Type-Options：nosniff）

<link rel="stylesheet" type="text/css" href="styles.css">

角應用成功編譯：

$ ng serve 
** NG Live Development Server is listening on localhost:4200, open your browser on http://localhost:4200 ** 
[...] 
webpack: Compiled successfully.

但是，當我訪問的Chromium瀏覽器http://localhost:4200，控制檯顯示在

GET http://localhost:4200/styles.css

在Firefox瀏覽器中，錯誤的錯誤是一個比較明確的：

GET 
http://localhost:4200/styles.css [HTTP/1.1 404 Not Found 15ms] 
The resource from "http://localhost:4200/styles.css" was blocked due to MIME type mismatch (X-Content-Type-Options: nosniff).

兩個文件，index.html，然後styles.css的位於我的角度應用程序的根目錄。我試圖讓more info about the problem：

nosniff 
    Blocks a request if the requested type is 

     "style" and the MIME type is not "text/css", or 
     "script" and the MIME type is not a JavaScript MIME type.

但我不明白爲什麼它bloking的要求，因爲我引用樣式表時所指定type="text/css"。

來源

2017-06-20 rodrunner

這是什麼說的'styles.css'是MIME類型？ – Raven

使用瀏覽器開發工具查看請求和響應頭。驗證MIME類型是否符合您的預期。 –

我剛碰到同樣的問題。這似乎是Express的一個怪癖，它可以表現爲幾個不同的原因，通過搜索網絡中「nodejs express css mime type」命中的次數來判斷。

儘管type="text/css"屬性，我們可以把我們的<link元素，快速的返回CSS文件

Content-Type: "text/html; charset=utf-8"

，而它真的應該返回它作爲

Content-Type: "text/css"

對於我來說，快速，骯髒的解決方法是簡單地刪除rel=屬性，即更改

<link rel="stylesheet" type="text/css" href="styles.css">

到

<link type="text/css" href="styles.css">

測試證實，該CSS文件的下載和風格也實際工作，這是我的目的不夠好。

來源

2017-07-15 14:52:35

我可以證實這一點。我更新了'Express'並遇到了同樣的問題。刪除'rel'屬性爲我解決了它。 – Tarabass

我不認爲這是好建議，刪除'rel =「樣式表」'會使瀏覽器不知道文件作爲樣式表，因此樣式將不會被評估和應用 – benjaminz

@benjaminz - 這當然不是一個理想的解決方案，但正如我所說，無論如何，這些風格確實得到了應用。更好的解決方案是修復Express，以便使用正確的MIME類型提供CSS文件。 –

我也刪除rel = "stylesheet"，我不再得到MIME類型錯誤，但款式都沒有被加載

來源

2017-12-03 19:08:24

CSS文件被阻止：MIME類型不匹配（X-Content-Type-Options：nosniff）

回答

相關問題