Problem: Before deploying the site to Nginx, everything worked fine. After deploying the site to Nginx, the page opened, but none of the styles were loaded. Press F12 in the browser, and console error:

Resource interpreted as Stylesheet but transferred with MIME type text/plain

The proof file was found, but was parsed in an incorrect format. Since this problem occurred after deployment to Nginx, look at the nginx configuration to find the problem.

Reason: After research, it is found that the file mime.types needs to be introduced. What is MIME types? When Nginx is deployed on Linux, the CSS file cannot be loaded. Nginx installed through YUM sends CSS files to the browser as text/plain by default, causing the browser to load CSS files incorrectly. We added the following to the relevant configuration file:

include mime.types; default_type application/octet-stream;

Nginx will convert the CSS file format to “Content-Type:text/ CSS” and it will load normally.

The Windows version of Nginx probably doesn’t have this problem because all functionality is pre-compiled. Nginx automatically loads the CSS file format correctly even if the above two lines are not specified.

The Multipurpose Internet Mail Extensions (MIME) type is a standardized way to indicate the nature and format of a document. It is defined and standardized in IETF RFC 6838. The Internet Assigned Numbers Authority (IANA) is the official body responsible to keeping track of all official MIME types, and you can find the most up-to-date and complete list at the Media Types page.

Browsers often use the MIME type (and not the file extension) to determine how it will process a document; it is therefore important that servers are set up correctly to attach the correct MIME type to the header of the response object.

Therefore, with MIME Types, browsers know how to process the document. By looking at official documents, we know that two common MIME types are: Two primary MIME types are important for the role of default types:

text/plain is the default value for textual files. A textual file should be human-readable and must not contain binary data. application/octet-stream is the default value for all other cases. An unknown file type should use this type. Browsers pay a particular care when manipulating these files, attempting to safeguard the user to prevent dangerous behaviors.