前言
今天踩的坑是浏览器缓存 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 值
