preface

Today’s pit is browser cache HTML, CSS ‘because its MIME type (‘text/ HTML ‘) is not a supported stylesheet MIME type, And strict MIME checking is enabled.


Background:

Project as follows:

Front-end interface + BFF (using egg-static)

BFF run script: NPM run start


Problematic phenomena:

1. After the release of the second version, I opened the file preview link in the production environment, and the page showed a blank screen. The browser console reported two errors
` ` `
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. After command + R refreshes the page, the page is displayed normally


The reason:

The reasons for the above two phenomena are as follows:
For the second symptom (after command + R refreshes the page, the page displays normally), mainly because there is cache (HTML) on the page, directly open the TAB and enter the browser to open the page, the page reads the cached HTML (old). After command + R forces a page refresh, the browser rerequests the new HTML so that the page can be accessed normally.




For the first phenomenon (after the release of the second version, open the file preview link in the production environment, the page appears white screen, including two errors); Let’s start with HTML differences
Old HTML (cached HTML) header:
New HTML (forcibly refreshed, rerequested HTML) header:
Comparing two HTML file headers shows that the linked static resources are not exactly the same. As long as it’s due to a new release in a formal environment; As a result, some old resources have been deleted by THE CDN, so there is no corresponding resource in the CDN (you can try to hover the mouse over the link, open a new tag, open it, and find the resource 404).
That’s why the browser console reported the following error (two, one as an example) :
` ` `
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
` ` `


Conclusion: In this case, CSS ‘because its MIME type (‘text/ HTML ‘) is not a supported stylesheet MIME type, “And strict MIME checking is enabled” is displayed. If the resource cannot be found, the strict MIME checking is enabled error occurs

Solution:

In this case, however, the root cause of the above error is that the HTML is cached, so you need to address this issue

Description:

Cache-control: public, max-age=31536000; cache-control: public, max-age=31536000; This means that the HTML will be cached for 31536000ms before a new HTML page is requested (except for a forced refresh of course).


However, in our project, egg is used to build the BFF intermediate layer and is configured in the config.default.js file of BFF. MaxAge is 0. Logically, the browser should not cache this HTML, and the max-age of the response header should be 0.

However, this configuration works in both development and test environments (maxAge 0), and in production it remains 31536000;


NODE_ENV=production; the default maxAge of egg-static is 31536000; So we later removed NODE_ENV=production (this environment variable is not used in the project) and solved the problem.


Of course, the final solution is to configure maxAge to be 0 in production mode.


Finally, paste the egg-static maxAge value set by default in different environments