浏览器缓存 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 值