Node.js全栈指南:认识MIME和HTTP

陈随易

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 类型。

picture 0

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

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

picture 1

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

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

picture 2

picture 3

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

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

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

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

picture 4

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

picture 5

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

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

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

picture 6

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

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

picture 7

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

picture 8

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

picture 9

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

了解和认识 MIME 和 HTTP 请求,是 Web 全栈开发的前提和基础,下一节内容,我们继续完善 Web 框架,最终用我们自己写的 Web 框架,做一个前后分离的,个人博客项目。

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/748764.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

这5款Windows高质量软件,吊打付费,谁用谁爽

咱们话不多说&#xff0c;进入我的电脑。 一键远控 一个支持远程控制电脑、传输文件、观看视频、锁定电脑屏幕以及重启和关机的免费远程控制软件。 再输入对应的设备识别码和验证码后&#xff0c;就可以对另一台电脑进行各种操作&#xff0c;同时也支持多台设备同时也能控制。…

JOSEF约瑟 JOXL-J拉绳开关 整定范围宽

用途 双向拉绳开关的壳体采用金属材料铸造&#xff0c;具有足够的机械强度,抵抗并下工作时脱落的岩石&#xff0c;爆块等物体的撞击不被破坏&#xff0c;当胶带输送机发生紧急事故时&#xff0c;启动拉绳开关,可立即停机报警&#xff0c;防止事故的扩大,保证工作现场的人身安全…

杀手级AI应用前瞻,一文带你了解8个ai大语言模型

一、大模型解析&#xff08;LLM、MLLM、GLM&#xff09; 基础概念&#xff1a; Transformer&#xff1a;ChatGPT的核心结构是Transformer&#xff0c;这是一种采用自注意力机制的深度学习模型。通过自注意力机制&#xff0c;Transformer能够理解输入文本的上下文信息&#xf…

【数据分享】《中国文化及相关产业统计年鉴》2013-2022

而今天要免费分享的数据就是2013-2022年间出版的《中国文化及相关产业统计年鉴》并以多格式提供免费下载。&#xff08;无需分享朋友圈即可获取&#xff09; 数据介绍 在过去的十年里&#xff0c;中国的文化及文化产业经历了翻天覆地的变化。随着《中国文化及相关产业统计年鉴…

3D数字人视频合成用户指南

数字人开放平台3D互动数字人如何接入_虚拟数字人(DVH)-阿里云帮助中心3D互动数字人&#xff08;对应开放平台的“智能客服”场景&#xff09;是虚拟数字人开放平台提供能够支持用户与3D数字人进行实时语音交互的数字人产品能力&#xff0c;需要配合智能对话机器人产品使用。本篇…

白鲸开源中标人保集团2024年数据调度工具软件产品及服务采购项目

近日&#xff0c;北京白鲸开源科技有限公司成功中标中国人民保险集团&#xff08;以下简称“中国人保”&#xff09;2024年数据调度工具软件产品及服务采购项目。此举将为中国人保提供高性能、高可用性、高扩展性和高安全性的一站式数据调度管理方案&#xff0c;大力推进中国人…

《数据结构与算法基础 by王卓老师》学习笔记——1.4算法与算法分析

一、算法 1.1算法的研究内容 1.2算法的定义 1.3算法的描述 以下是算法的自然语言描述 以下是算法的传统流程图表示 以下是NS流程图表示 1.4算法和程序的区别与联系 1.5算法的五个特性 1.6算法设计的要求 Robustness也称为鲁棒性 二、算法分析 2.1算法时间效率的度量 2.1.1事…

爬虫-Python基础

一、Python环境的安装 1. 下载Python 访问Python官网: Welcome to Python.org点击downloads按钮&#xff0c;在下拉框中选择系统类型(windows/Mac OS/Linux等)选择下载最新版本的Python 2. 安装Python 双击下载好的Python安装包勾选左下角 Add Python 3.7 to PATH 选项&…

机器人控制系列教程之动力学建模(2)

接昨天的推文&#xff1a;https://editor.csdn.net/md/?articleId139991958 &#xff0c;动力学的求解通常是个相对比较复杂的过程&#xff0c;但现在基本上不用人工来推算求解各种公式和求解过程了&#xff0c;大家只需要知道其中的步骤即可&#xff0c;现代对于动力学问题的…

uni-app (通过HBuilderX 和 VS Code 开发)详细连接过程教学。

使用 HBuilderX 创建 uni-app 项目 并编译到微信开发者工具。 uni-app 支持两种方式创建项目&#xff1a; 通过 HBuilderX 创建 通过命令行创建 首先我们需要先下载HBuilderX 下载链接地址&#xff1a;DCloud - HBuilder、HBuilderX、uni-app、uniapp、5、5plus、mui、wap2…

postman忘记密码发邮件,久久收不到怎么办?

根本原因是需要FQ&#xff01;&#xff01;&#xff01; 重置密码的链接&#xff1a; https://identity.getpostman.com/trouble-signing-in 找个平台或者软件&#xff0c;访问这个链接即可完成修改密码后续操作&#xff0c;不用再傻傻等着验证码了。 有需要协助的朋友也可私信…

uniapp标题水平对齐微信小程序胶囊按钮及适配

uniapp标题水平对齐微信小程序胶囊按钮及适配 状态栏高度胶囊按钮的信息计算顶部边距模板样式 标签加样式加动态计算实现效果 t是胶囊按钮距离的top h是胶囊按钮的高度 s是状态栏高度 大概是这样 状态栏高度 获取系统信息里的状态栏高度 const statusBarHeight uni.getSy…

开源“卖货主播”AI大模型——拳打李佳琦、脚踢小杨哥、人人都能当销冠?

开源“卖货主播”AI大模型——拳打李佳琦、脚踢小杨哥、人人都能当销冠&#xff1f; 刚刚在知名同性交友平台发现了一个或许能让你致富的开源项目——“Streamer-Sales 销冠”。 正如其名字所言&#xff0c;这是一个卖货主播LLM大模型&#xff0c;旨在让你成为销冠。 https:/…

换新手机了,旧手机的微信聊天记录怎么办?两个方法,轻松迁移

618买的新手机终于到手&#xff0c;但你是否在为旧手机上的微信聊天记录感到困扰&#xff1f;不用担心&#xff0c;迁移过程其实非常便捷&#xff01; 在本文中&#xff0c;我将为你展示2个简单的步骤&#xff0c;让你轻松迁移微信聊天记录。无论你更换新手机的原因是什么&…

财务RPA案例研究——分析成功的财务RPA实施案例

现代社会正加速向数字时代转型&#xff0c;数字技术以崭新的模式全面融入各行业领域。为顺应新一轮科技革命和产业变革趋势&#xff0c;越来越多的企业不断深化应用大数据、云计算、人工智能等新一代信息技术&#xff0c;积极迎接数字化转型&#xff0c;而RPA技术由于能够以自动…

SuperMap GIS基础产品FAQ集锦(20240627)

一、SuperMap iDesktopX 问题1&#xff1a;请问桌面端二三维数据对接处理&#xff0c;尤其是三维数据&#xff0c;处理自动化有没有已有的模型或者是效果示例&#xff1f; 11.2.0 【解决办法】【三维数据】-【流程操作】里有三维数据处理自动化的算子 问题2&#xff1a;请问…

LSTM理解

目录 一、LSTM的本质 二、LSTM的原理 三、LSTM的应用 本文将从LSTM的本质、LSTM的原理、LSTM的应用三个方面&#xff0c;带您一文搞懂长短期记忆网络Long Short Term Memory | LSTM。 一、LSTM的本质 RNN 面临问题&#xff1a;RNN&#xff08;递归神经网络&#xff09;在处理…

【网络安全的神秘世界】SQL注入漏洞(上)

&#x1f31d;博客主页&#xff1a;泥菩萨 &#x1f496;专栏&#xff1a;Linux探索之旅 | 网络安全的神秘世界 | 专接本 | 每天学会一个渗透测试工具 本章知识使用的靶场&#xff1a;DVWA 一、漏洞简介 SQL&#xff1a;结构化查询语言&#xff0c;是一种特殊的编程语言&#…

项目经理必读:三步走实现项目高效管理

一个项目的成功往往取决于项目管理能力的高低。若管理不当&#xff0c;易导致团队成员间的推诿和抱怨&#xff0c;且项目团队还可能面临成员对目标不明确、信息不透明、进度难以跟踪等问题。作为项目经理&#xff0c;掌握有效的项目管理策略至关重要。 一、精细化的目标拆解 …

瑶池数据库SQL-问题二的解决方案

瑶池数据库SQL-问题二的解决方案 为什么选问题二问题二准备工作解决方案第一步第二步初步尝试再次尝试主表自关联查询满足条件数据 解题感受 为什么选问题二 个人没有详细的看三个题目的具体内容&#xff0c;只是看了三个题目的题目名称&#xff0c; 最后觉得问题二比较有意思…