問題描述
我有這個問題。 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 輔助翻譯的英文資料結果。如果您對結果不滿意,可以加入我們改善翻譯效果:薇曉朵技術論壇。