問題描述
我有這個問題。 Chrome 會繼續返回此錯誤
Resource interpreted as stylesheet but transferred with MIME type text/html
受此錯誤影響的檔案只是 Style，選擇和 jquery-gentleselect(在索引中匯入的其他 CSS 檔案以同樣的方式工作，沒有錯誤) 。我已經檢查了我的 MIME 型別，文字/CSS 已經在 CSS 上。
老實說，我想從理解這個問題開始 (一個似乎我不能單獨做的事情) 。
最佳解決方法
i’d like to start by understanding the problem
瀏覽器向伺服器發出 HTTP 請求。伺服器然後進行 HTTP 響應。
請求和響應都包含一些標題和一個 (有時是可選的) 主體，其中包含一些內容。
如果有一個主體，那麼其中一個標題是 Content-Type，它描述了主體是什麼 (它是一個 HTML 檔案？一個影像？表單提交的內容等) 。
當您要求您的樣式表時，您的伺服器告訴瀏覽器它是 HTML 檔案 (Content-Type: text/html) 而不是樣式表 (Content-Type: text/css) 。
I’ve already checked my myme.type and text/css is already on css.
然後，關於您的伺服器的其他內容使得該樣式錶帶有錯誤的內容型別。
使用瀏覽器開發人員工具的 「網路」 選項卡來檢查請求和響應。
次佳解決方法
使用角度？
這是一個非常重要的注意事項。
基本標籤不僅需要在頭部，而且位於正確的位置。
我的基本標籤在頭部錯誤的地方，它應該在任何具有 url 請求的標籤之前。基本上把它作為標題下面的第二個標籤解決了它。
<base href="/">
我寫了一篇小貼子 here
第三種解決方法
我也面臨同樣的問題。在做了一些 R&D 後，我發現問題是檔名。實際檔案的名稱是”lightgallery.css”，但在連結時我鍵入了”lightGallery.css” 。
更多資訊：
它在我的本地主機 (作業系統：Windows 8.1 和伺服器：Apache) 上執行良好。但是，當我將應用程式上傳到遠端伺服器 (不同於我的本地主機的不同的作業系統和 Web 伺服器) 時，它不起作用，給我同樣的錯誤。
所以，問題是伺服器的區分大小寫 (相對於檔名) 。
第四種方法
嘗試這個<link rel="stylesheet" type="text/css" href="../##/yourcss.css">
其中 ##是您的資料夾，其中是.CSS 檔案
不要忘記：..(雙點) 。
第五種方法
根據其他答案，似乎這個訊息有很多原因，我想我只是分享我的個人解決方案，以防將來有任何人有我的確切問題。
我們的網站從 AWS Cloudfront 發行版載入了 CSS 檔案，它使用 S3 bucket 作為起始點。這個特定的 S3 儲存桶被保持同步到執行 Jenkins 的 Linux 伺服器上。 sync 命令透過 s3cmd 根據作業系統所述 (可能基於副檔名) 自動設定 S3 物件的 Content-Type 。由於某些原因，在我們的伺服器中，除了.css 檔案之外，所有型別都正確設定，它給出了型別 text/plain 。在 S3 中，當您檢查檔案屬性中的後設資料時，可以將型別設定為任何所需。將其設定為 text/css 允許我們的網站將檔案正確解釋為 CSS 並正確載入。
第六種方法
使用角度
在我的情況下使用 ng-href 而不是 href 為我解決了。
注意 ：
我和 back-end 一起工作
第七種方法
@Rob Sedgwick 的答案給了我一個指標，但是，在我的情況下，我的應用程式是一個彈簧啟動應用程式。所以我只是在我的安全配置中新增了相關檔案路徑的排除…
注意 – 此解決方案是 SpringBoot-based … 您可能需要做的可能會因您使用的程式語言和/或您正在使用的框架而有所不同
不過要注意的是：
Essentially the problem can be caused when every request, including those for static content are being authenticated.
所以讓我們說一些導致錯誤的靜態內容的路徑如下：
一個名為”plugins” 的路徑
http://localhost:8080/plugins/styles/css/file-1.css
還有一個叫做”pages” 的路徑
http://localhost:8080/pages/styles/css/style-1.css
然後我在彈簧啟動安全配置中新增如下的排除：
@Configuration
@EnableGlobalMethodSecurity(prePostEnabled = true)
@Order(SecurityProperties.ACCESS_OVERRIDE_ORDER)
public class SecurityConfig extends WebSecurityConfigurerAdapter {
@Override
protected void configure(HttpSecurity http) throws Exception {
http.authorizeRequests()
.antMatchers(<comma separated list of other permitted paths>, "/plugins/**", "/pages/**").permitAll()
// other antMatchers can follow here
}
}
從認證中排除這些路徑"/plugins/**"和"/pages/**"會使錯誤消失。
乾杯!
參考文獻
注：本文內容整合自 Google/Baidu/Bing 輔助翻譯的英文資料結果。如果您對結果不滿意，可以加入我們改善翻譯效果：薇曉朵技術論壇。