踩坑记录

在尝试在 mac 上部署静态 doc 项目时，发现样式死活显示不出来，但是在开发环境样式可以正常显示的，打包后使用 nginx 代理却不能正常显示，这让我感到很困惑，我一开始认为是代理地址，或者相对路径配置的有问题，但在 devtools - network 中查看 css, js 文件 均成功请求。

于是我尝试在 URL 上拼接 css 文件路径，发现直接就下载下来了，要知道，正常的脚本（css, js…）如果直接通过浏览器访问脚本地址，是直接在网页中显示出来的，然而这里却没有在网页上打开，而是直接下载下来了。

经过一段时间的搜索排查后，发现之前由于 mime.types 文件没有和 nginx.conf 再同一个目录下，启动报错被我误删导致的。

mime.types 中指定了项目中已知的文件类型，如果没有在 mime.types 中出现，则默认为 default_type。
而在当时 default_type 指定的是：application/octet-stream, 所以导致 js, css 没有正常加载资源。

在 chrome 下，css 与 js 文件被设为 application/octet-stream 类型不会报错, 也没有任何提示，而在 firefox 中会报错提醒。

解决方式

在 nginx.conf 中指定了 mime.types 文件后, 重启后访问恢复正常

MIME type 介绍

MIME (Multipurpose Internet Mail Extensions) 类型是一种用于标识文件内容类型的标准。它最初是为了支持电子邮件系统而设计的，但现在也被广泛用于HTTP协议中，用于指示在互联网上传输的文件的类型。

MIME type 现在称为「 媒体类型 (media type) 」，但有时也是「 内容类型 (content type) 」是指示文件类型的字符串，与文件一起发送（例如，一个声音文件可能被标记为 audio/ogg ，一个图像文件可能是 image/png ）。它与传统 Windows 上的文件扩展名有相同目的。

MIME type 由两个部分组成：主类型和子类型，它们之间由斜杠（/）分隔。主类型表示一类广泛的内容类型，而子类型表示这类内容的具体子类型。

下面是一些业务系统中常见的 MIME type ：

1. 文本类型：

   • text/plain：普通文本文件。
   • text/html：HTML网页。
   • text/css：CSS样式表文件。
   • text/xml：XML文件。

2. 图像类型：

   • image/jpeg：JPEG图像。
   • image/png：PNG图像。
   • image/gif：GIF图像。
   • image/svg+xml：可缩放矢量图形。

3. 音频类型：

   • audio/mpeg：MPEG音频文件（MP3）。
   • audio/ogg：Ogg音频文件。
   • audio/wav：WAV音频文件。

4. 视频类型：

   • video/mp4：MP4视频文件。
   • video/webm：WebM视频文件。
   • video/mpeg：MPEG视频文件。

5. 应用程序类型：

   • application/javascript：JS文件。
   • application/json：JSON数据。
   • application/xml：XML数据。
   • application/octet-stream：未知的二进制数据。

在 HTTP 请求和响应中，MIME type 通常以 Content-Type 标头的形式进行传输，指示了消息主体的类型。这使得服务器和客户端能够正确地处理传输的数据，确保正确地解释内容，如在浏览器中正确显示图像或以适当的方式打开文件。

MIME type 在互联网通信中起着重要的作用，帮助确保数据能够以正确的格式传输和解释，从而促进了各种类型文件的无缝交互。

application/octet-stream 介绍

这是应用程序文件的默认值。意思是 未知的应用程序文件， 浏览器一般不会自动执行或询问执行。浏览器会像对待 设置了 HTTP 头 Content-Disposition值 为 attachment 的文件一样来对待这类文件，即浏览器会触发下载行为。

application/octet-stream 是一种通用的二进制数据类型的 MIME type 。在 MIME type 中，application 表示一种应用程序或二进制数据类型，而 octet-stream 表示二进制数据流，即未知的二进制数据。

当服务器或系统无法识别文件的具体内容类型时，通常会将文件的 MIME type 设置为 application/octet-stream。这种设置告诉接收文件的客户端应用程序不要尝试解释文件的内容，而应该直接将其保存到本地文件系统中或交给用户选择打开方式。因为没有指定明确的内容类型，所以客户端将不能自动地以正确的方式打开或显示该文件，而是需要用户自行选择相应的应用程序来处理。

application/octet-stream 通常用于传输各种二进制文件，如未知格式的文件、压缩文件（如ZIP、RAR）、可执行文件、字体文件、以及其他无法明确定义为特定内容类型的文件。这样的文件可能包含任何类型的数据，因此服务器或发送者没有确切的方式来标识文件的内容类型。

需要注意的是，当服务器知道文件的具体内容类型时，最好还是使用相应的明确 MIME type ，而不是将其设置为 application/octet-stream。这样可以确保客户端能够正确地处理和展示文件内容，提供更好的用户体验。但在某些情况下，例如传输未知类型的二进制数据或允许用户下载任意文件时，这时使用 application/octet-stream 才是一种合理的选择。

相关资料

• MIME 类型
• 常见 MIME 类型列表
• Content-Disposition