【随笔】MIME类型

小程序：扫一扫查出行
【扫一扫了解最新限行尾号】
复制小程序

在openResty作为Web服务器的情况下访问根目录的首页时，出现了这样一个问题：

nginx端的配置：

worker_processes 2;
error_log logs/error.log; events {
worker_connections 1024;
} http {
server {
listen 8080;
server_name localhost; location / {
index index index.html index.htm;
root /usr/local/openresty/nginx/work; }
location /dir {
default_type "text/plain";
content_by_lua_file /usr/local/openresty/nginx/work/resources/lua/index.lua;
} }
}

仅就nginx配置来看，是没有什么问题的，不过实际使用上，就发生了这个错误，页面的呈现也出现了问题，仅仅把文本输出了，其余都没有反应。

多方查询求证，到目前为止，问题的解决方案就是在服务器的响应头添加Content-Type配置，这里有两种解决办法，一种是openresty的more_set_headers模块方法，另外一种就是使用nginx方法add_header指令给response添加Content-type内容，这样就解决了那个办法。

MIME类型

MIME是一种保证非ASCII码文件在internet上传播的规格。原本是用于邮件系统传送除了ASCII就是纯文本文件的内容外，可以传送图片等其他格式使用的。后来，浏览器也支持这种规范，所以除了HTML等文本格式外，可以有很多其他格式。

浏览器在接收到服务器的响应文件时，会通过响应头Content-Type的内容来进入插件系统进行查找，查找出哪种插件可以识别读取接收到的文件。如果插件缺失，会提示你下载插件，所以Content-Type的内容决定了你是否能够正确的呈现你想要呈现的内容。

常见的MIME类型

超文本标记语言文本 .htmlhtml text/html

普通文本 .txt text/plain

RTF文本 .rtf application/rtf

GIF图形 .gif image/gif

JPEG图形 .ipegjpg image/jpeg

au声音文件 .au audio/basic

MIDI音乐文件 midmidi audio/midi,audio/x-midi

RealAudio音乐文件 .raram audio/x-pn-realaudio

MPEG文件 .mpgmpeg video/mpeg

AVI文件 .avi video/x-msvideo

GZIP文件 .gz application/x-gzip

TAR文件 .tar application/x-tar

更多查看这里。

Internet中有一个专门组织IANA来确认标准的MIME类型，但Internet发展的太快，很多应用程序等不及IANA来确认他们使用的MIME类型为标准类型。因此他们使用在类别中以x-开头的方法标识这个类别还没有成为标准，例如：x-gzip，x-tar等。事实上这些类型运用的很广泛，已经成为了事实标准。只要客户机和服务器共同承认这个MIME类型，即使它是不标准的类型也没有关系，客户程序就能根据MIME类型，采用具体的处理手段来处理数据。而Web服务器和浏览器（包括操作系统）中，缺省都设置了标准的和常见的MIME类型，只有对于不常见的 MIME类型，才需要同时设置服务器和客户浏览器，以进行识别。

由于MIME类型与文档的后缀相关，因此服务器使用文档的后缀来区分不同文件的MIME类型，服务器中必须定义文档后缀和MIME类型之间的对应关系。而客户程序从服务器上接收数据的时候，它只是从服务器接受数据流，并不了解文档的名字，因此服务器必须使用附加信息来告诉客户程序数据的MIME类型。服务器在发送真正的数据之前，就要先发送标志数据的MIME类型的信息，这个信息使用Content-type关键字进行定义，例如对于HTML文档，服务器将首先发送以下两行MIME标识信息,这个标识并不是真正的数据文件的一部分。

Content-type: text/html

注意，第二行为一个空行，这是必须的，使用这个空行的目的是将MIME信息与真正的数据内容分隔开。

使用了add_header指令后，index.html内联的.js文件和.css文件的response Content-Type内容都改正确了，本文开头的问题也没有再出现了。不过Chrome依旧仅显示了文本，各种js和css效果均未触发，问题终究未解决....

最后，无意识的使用了其他的浏览器，包括IE等浏览器访问该文件，结果呈现内容效果是正确的。再用Chrome试试，依旧有问题...难道需要考虑浏览器兼容？或者是其他？先在这里把问题记下，待解决了问题再补齐！