瀏覽器緩存 html以及Refused to apply style from 'xxx.css' because its MIME type...

前言

今天踩的坑是瀏覽器緩存 html，以及 Refused to apply style from 'xxx.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled。

背景：

項目爲：

前端界面+bff(使用了egg-static)

bff 運行腳本：npm run start

存在問題的現象：

1. 在發第二個版本以後，打開生產環境的文件預覽連接，頁面出現白屏，瀏覽器控制檯報了兩個錯誤

```

Refused to apply style from 'xxx.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

```

2. command + R 刷新頁面以後，頁面顯示正常

緣由：

針對以上兩個現象，緣由以下:

針對第2個現象（command + R 刷新頁面以後，頁面顯示正常），主要是因爲頁面存在緩存（html），直接新開tab 在瀏覽器回車打開頁面以後，頁面讀取了緩存的html(舊的)；command + R 強制刷新頁面以後，瀏覽器從新請求新的html，從而正常訪問頁面。

針對第1個現象（在發第二個版本以後，打開生產環境的文件預覽連接，頁面出現白屏，包了兩個錯誤）;先看html的差別

舊的html （緩存的html）頭部：

新的HTML (強行刷新，從新請求的html)頭部：

對比兩個html 文件頭部，能夠發現二者連接的靜態資源是不徹底同樣的。只要是因爲，從新在正式環境發佈了新的版本；致使部分舊的資源已經被cdn 刪除，因此在cdn 那邊不存在相應的資源（能夠嘗試鼠標懸停在連接上，open 一個new tag ，進行打開，會發現資源404）。

所以瀏覽器控制檯纔會報如下錯誤(兩個，只寫錯誤一個做爲例子)：

```

Refused to apply style from 'xxx.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled

```

總結：本例子中，出現「Refused to apply style from 'xxx.css' because its MIME type ('text/html') is not a supported stylesheet MIME type, and strict MIME checking is enabled」的報錯，只要是由於找不到該資源，之後出現相似的錯誤能夠首先想一想路徑的問題

解決：

然而在這個案例中，出現以上錯誤的根本緣由是 html 被緩存了，因此須要就這個問題進行處理

描述：

在瀏覽器的開發者工具中，查看當前頁面html的響應頭，能夠看到cache-control: public, max-age=31536000；也就是該html 會被緩存31536000ms這麼長的時間，以後纔會請求新的 html 頁面(固然強制刷新除外)。

可是在咱們項目中是有使用了egg 搭建 bff 中間層的，並有在bff 的 config.default.js 文件配置了，maxAge 爲0；按道理來講，瀏覽器是不該該對該html 進行緩存，響應頭的 max-age 應該爲 0 纔對。

然而這個配置有在開發環境和測試環境起做用（ maxAge 爲0），在生產環境依舊是 maxAge 爲31536000；

後來發現主要是在啓動bff的時候，配置了 NODE_ENV=production，而 egg-static 的默認的 maxAge 爲 31536000 ；因此後來刪除了 NODE_ENV=production （項目裏面沒有用到這個環境變量）就解決問題了。

固然完全的解決問題是配置生產環境模式下的 maxAge 也爲 0，纔是最後的解決方案。

最後，貼一下egg-static 在不一樣環境下默認設置的 maxAge 值