我正在開發一個Angular 4應用程序，我想應用一些全球風格。按照angular站點上的教程，我在應用程序的根目錄下創建了一個“styles.css”文件，我在應用程序的index.html中引用了這個樣式表:

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

angular應用程序已成功編譯:

$ 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這兩個文件都位于我的angular應用程序的根目錄下。 我試圖獲得更多關于這個問題的信息:

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.

但是我不明白它為什么阻塞請求，因為我在引用樣式表時已經指定了type="text/css"。

我剛剛遇到了同樣的問題。從在網上搜索“nodejs express css mime type”的點擊量來看，這似乎是Express的一個怪癖，它可以出于幾個不同的原因表現出來。

盡管我們在& lt鏈接元素，Express將CSS文件作為

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

而實際上它應該返回

Content-Type: "text/css"

對我來說，快速而骯臟的解決方法是簡單地刪除rel=屬性，即change

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

到

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

測試證實CSS文件已經下載，樣式也確實有效，對于我的目的來說已經足夠好了。

我還刪除了rel = "stylesheet "，不再出現MIME類型錯誤，但是樣式沒有被加載

一些答案建議刪除rel="stylesheet "，但這對我來說并不適用。 根據expressjs文件:https://expressjs.com/en/starter/static-files.html 使用express.static函數提供靜態文件，如CSS、JavaScript等...

app.use(express.static('public'))

從那里，您應該能夠加載公共目錄下的任何文件 例如，如果您在目錄{PROJECT_PATH}/public/css/中有一個style.css文件

http://localhost:3000/CSS/style . CSS就可以了。

在全棧web應用程序(開發中)中遇到了同樣的問題，我只是通過正確地將css文件鏈接到呈現的頁面來解決這個問題。如上所述，刪除rel =樣式表可以防止瀏覽器中出現錯誤，但它不會加載應該應用于頁面的樣式。簡而言之，這不是一個解決方案。

如果您使用快速靜態，您可以將此作為示例:

服務器端:

app.use(express.static(__dirname + "/public", {
    index: false, 
    immutable: true, 
    cacheControl: true,
    maxAge: "30d"
}));

客戶端:

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

只需在您希望鏈接到html頁面的文件前面添加一個正斜杠(如果您不使用任何模板引擎來呈現html頁面), express-static會自動為您完成剩下的工作。

Angular應用程序中的javascript文件(相對于css)也有類似的問題。實際上，問題不在于Mime類型(正如外部錯誤消息所指出的)，而最終是一個“404 Not Found”錯誤。

在我的例子中，將腳本文件放在除了“assets”文件夾之外的任何地方都會導致404并最終導致mime類型錯誤。以下標記在index.html的head部分對我有效:

<script src="assets/plugins/jquery.min.js" type="text/javascript"></script>

資產文件夾是Index.html文件的同級。

這就解決了我的問題:

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

一個簡單的方法是在所用樣式表的路徑前添加一個正斜杠/對我來說是href='css/style.css '，改成了href='/css/style.css '。非常有效。

我也有這個問題。

我將腳本文件移動到不同的位置，現在沒有錯誤:

來自& lt腳本src = & quot。/scripts/simple-keyboard/keyboard . index . min . js & quot；type = & quottext/html & quot；& gt& lt/script & gt； 到& lt腳本src = & quot。/scripts/keyboard . index . min . js & quot；type = & quottext/JavaScript & quot；& gt& lt/script & gt；

正如Davelli指出的，問題不是文件不匹配，而是沒有發現錯誤。很奇怪它返回了錯誤的錯誤！

如果此解決方案不起作用:

app.use(express.static('public'))//for server
<link rel="stylesheet" href="/index.css">//for styles

然后確保& quot公共& quot文件夾存在于根目錄中。這是我的案子。

我也面臨著同樣的問題。但我發現這與為style.css文件使用正確的目錄有關。所以我試了下面這行代碼，它運行得非常好。

<link rel="stylesheet" type="text/css" href="/app/scss/style.css">

在我的例子中，我只包括& quot/& quot；之前& quotCSS/style . CSS & quot；

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

to

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

對我有用的東西正在改變

<script type="text/javascript" src="/lib/matrix.js"></script>

到

<script type="text/javascript" src="./lib/matrix.js"></script>

我也遇到了這個問題。我用Kirankumar Gonti的提示解決了這個問題。

使用以下代碼行:

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

確保設置常量路徑。

您還希望確保css文件夾嵌套在公共文件夾中。

我也遇到了這個問題。我用Kirankumar Gonti的提示解決了這個問題。

我在我的app.js文件中使用了以下代碼行，我沒有公共文件夾，但將我的style.css存儲在css文件夾中:

app.use('/css', express.static(path.join(__dirname, "css")));

在我的/css/style.css文件中，我使用:

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

對于仍然有這個錯誤的人，我可以通過包含& quotsrc/資產& quot在我的angular.json文件中

"資產& quot:[& quot；src/favicon . ico & quot；，& quotsrc/資產& quot，& quotsrc/upload . PHP & quot；]

此外，您的index.html的目錄不應包括在資產中。意思是你不應該包括& quotsrc"在& quot資產& quot

遇到了同樣的問題，在四處查看后，我發現你只需要引用特定文件夾中的文件，而不是整個目錄。 示例如果您在static app . use(express . static(public))中引用公共根，那么您只需要引用& ltlink rel = style sheet href = CSS/styles . CSS & gt；而不是整個目錄。

"CSS文件被阻止:MIME類型不匹配使用VS代碼+ Live服務器時

如果您在VS代碼中使用Live Server(或替代產品)進行測試時遇到此錯誤，可能看起來擴展發送了一個錯誤的mime類型和CSS文件，而實際上它發送了一個404錯誤，以防您的VS代碼工作區頂層目錄設置不正確，從而無法訪問資源 通常，如果您的workplace root設置為實際應用程序的根目錄之上的目錄，這可能很容易在編碼時被VS代碼忽略，但是在調試過程中會錯誤地引用資源。

在我的例子中，我把下面的代碼塊顛倒了順序，所以我得到了這個錯誤。如果你有這個問題，遵循下面的順序，它可能會有所幫助

1.

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

2.

app.get('*', (req, res) => {
   res.sendFile(path.join(__dirname, 'public/index.html'));
});

3.

app.use('/api', cors(corsOptions), indexRouter);

這就是發生在我身上的事， 我的網站被存檔了，所以css和js文件不可用。恢復我的主機后一切順利。

所以，請檢查網址是否正確。