5)认识MIME和HTTP

陈随易的Node.js全栈实验指南前端之虎陈随易2024-6-5 14:49

MIME,全称“多用途互联网邮件扩展类型”。这名称相当学术,用人话来说就是:

我们浏览一个网页的时候,之所以能看到html文件展示成网页,图片可以正常显示,css样式能正常影响网页效果,js脚本可以正常运行,视频可以正常播放,字体可以自定义,都跟MIME有着密不可分的关系。

当我们引入CSS的时候,会写一个type=“text/css”

<link rel="stylesheet" type="text/css" href="./index.css" />

当我们引入JS的时候,会写一个type="text/javascript"

<script type="text/javascript" src="./index.js"></script>

这就是MIME类型。

对于浏览器来说,它从服务器拿到的资源,不管是CSS还是JS还是HTML,都是一串字符串。

要让CSS、JS、HTML各司其职,做好它该做的事情,就要用MIME来进行判断。

当我们从服务器发起一个HTTP请求,那么HTTP返回的Content-Type属性,就对应了我们说到的这个MIME类型。

以上动图,每个请求文件都有其对应的Content-Type属性和值,不同的文件值不一样。

我们能够看到一个个正常的网页,就是通过Content-Type来决定请求的文件如何渲染,如何执行,如何显示的。

但是,在上一章【浏览器显示一个网页】中,我们并没有看到返回Contnet-Type属性,网页也能正常显示,这是为什么呢?

因为,经过这么多年的发展,现代浏览器已经具备较好的容错能力,即使在某些情况下MIME类型缺失或错误,它们也能够根据上下文推断资源类型并正确解析。

如果我们明确设置资源的Content-Type值,比如上方截图中,将CSS的返回MIME类型Content-Type的值设置为text/html,则CSS就会用HTML类型来解析,从而导致字体并没有变成红色。

这就是MIME的作用,我们要用Node.js开发一个Web框架,MIME是必须要了解的一个内容。

不同的资源类型,要设置好正确的MIME类型。

那么接下来呢,我们再来讲一讲HTTP,全称:超文本传输协议。

如上图,浏览器向服务器发起一个HTTP请求,服务端则给浏览器返回对应的内容。

HTTP请求分为4部分,分别是请求行请求头、空行请求体

HTTP响应也凤尾4部分,分别是响应行响应头空行响应体

其实HTTP请求和响应是一样的,只不过名词不一样而已。

如上图所示,我们通过浏览器的调试面板,可以看到请求和响应的具体内容。

其中(1)处是请求行,(2)处是请求头,(3)处是响应头。

那么标头紧挨着的“负载”,就是请求体

负载右边“预览”就是响应体

预览右侧的“响应”也是响应体,这是返回数据的原始格式,预览只是可以更方便地查看和操作响应体。

了解和认识MIME和HTTP请求,是Web全栈开发的前提和基础。

下一节内容,我们继续完善Web框架,最终用我们自己写的Web框架,做一个前后分离的,个人博客项目。