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

news2024/11/16 15:06:15

陈随易

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 框架,做一个前后分离的,个人博客项目。

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Xilinx FPGA:vivado这里记录一个小小的问题

问题描述&#xff1a;uart_data从rx模块输入到ctrl模块后就没有值了。 问题一&#xff1a;首先我仿真例化了两个模块&#xff0c;并且&#xff0c;我选取了单独例化的rx模块中的uart_data 的值&#xff0c;所以在仿真中它是有值的。 timescale 1ns / 1ps module test_bench_TO…

如何高效使用 .http 文件记录和测试API接口

1. 前言 在现代软件开发中&#xff0c;API&#xff08;应用程序接口&#xff09;成为了系统间通信的重要桥梁。.http 文件作为一种轻量级的API请求描述方式&#xff0c;不仅便于开发者记录和分享API接口信息&#xff0c;还能够帮助自动化测试流程。本文将深入介绍如何有效地使…

【论文阅读】-- MultiStream:探索分层时间序列的多分辨率流图方法

MultiStream: A Multiresolution Streamgraph Approach to Explore Hierarchical Time Series 摘要1 引言2相关工作2.1 堆叠图和流图可视化2.2 时间序列的层次结构2.3 交互技术 3 需求分析4 视觉映射和功能4.1 设计原理总结4.2 概述4.3 多分辨率视图4.4 控制器4.5 层次管理器 5…

【知识学习】阐述Unity3D中FogLOD的概念及使用方法示例

在Unity3D中&#xff0c;Fog&#xff08;雾效&#xff09;和LOD&#xff08;Level of Detail&#xff0c;细节层次&#xff09;是两种用于提高场景视觉效果和性能的技术。 Fog&#xff08;雾效&#xff09; 雾效是一种视觉效果&#xff0c;用于模拟大气中的雾或烟&#xff0c…

纠结要不要选计算机专业,问问自己这个问题

又到了一年一度高考填志愿的时候&#xff0c;几年前我做过一个介绍计算机专业的视频。有需要的同学可以去看下 有人看完视频问我&#xff1a; 你到底是在推荐还是在劝退计算机&#xff1f; 还有人说&#xff1a; 我也不知道自己对计算机有没有兴趣&#xff0c;怎么办&#xff1…

应用案例 | 如何监测高价值货物在物流运输过程中受到的振动和冲击?全面保障货物安全

一、货物运输 不同种类的货物对运输的要求不同&#xff0c;钢铁、煤炭、矿石等大宗物资通常对运输要求较低&#xff0c;而电子产品、IT 产品、家电等高价值敏感类货物则更强调运输的安全性和时效性&#xff0c;往往希望能尽可能安全和快速送达这类货物&#xff0c;使之尽快进入…

uni-app与原生插件混合开发调试1-环境准备

uni-app与原生插件混合开发调试系列文章分为3篇&#xff0c;分别详细讲了《环境准备》、《搭建uni-app本地开发调试环境》和《安卓原生插件开发调试和打包》&#xff0c;3篇文章完整详细地介绍了“从环境安装配置到本地开发调试到原生插件打包”整个流程。 相关名词和概念解释…

计算机网络面试TCP篇之TCP三次握手与四次挥手

TCP 三次握手与四次挥手面试题 任 TCP 虐我千百遍&#xff0c;我仍待 TCP 如初恋。 巨巨巨巨长的提纲&#xff0c;发车&#xff01;发车&#xff01; PS&#xff1a;本次文章不涉及 TCP 流量控制、拥塞控制、可靠性传输等方面知识&#xff0c;这些知识在这篇&#xff1a; TCP …

神州信息与国科量子联合进军量子网络应用服务市场(中国军民两用通信技术展览会)

量子通信&#xff0c;智联未来 —— 神州信息与国科量子共启安全通信新纪元 在信息技术飞速发展的今天&#xff0c;信息安全已成为全球关注的焦点。神州数码信息服务股份有限公司&#xff08;神州信息&#xff09;与国科量子通信网络有限公司&#xff08;国科量子&#xff09;…

PyCharm 2024.1最新变化

PyCharm 2024.1 版本带来了一系列激动人心的新功能和改进&#xff0c;以下是一些主要的更新亮点: Hugging Face 模型和数据集文档预览&#xff1a;在 PyCharm 内部快速获取 Hugging Face 模型或数据集的详细信息&#xff0c;通过鼠标悬停或使用 F1 键打开文档工具窗口来预览。 …

【数据结构】--栈

&#x1f44c;个人主页: 起名字真南 &#x1f923;个人专栏:【数据结构初阶】 【C语言】 目录 1 栈1.1 栈的概念和结构1.2 栈的实现1.2.1 头文件1.2.2 初始化1.2.3 销毁1.2.4 打印所有元素1.2.5 入栈1.2.6 出栈1.2.7 获取栈顶数据1.2.8 判空1.2.9 获取元素个数 1 栈 1.1 栈的概…

Element-UI 并排显示多个 disabled按钮的时候, 不生效问题解决

目录 Element-UI 并排显示多个 disabled按钮的时候&#xff0c; 不生效问题解决 解决方法&#xff1a; 运行结果&#xff1a; Element-UI 并排显示多个 disabled按钮的时候&#xff0c; 不生效问题解决 解决方法&#xff1a; Element-UI 并排显示多个 disabled按钮的时候&a…

测绘局内外网文件导入导出,怎样才能效率安全两手抓?

测绘局负责进行各种基础测绘工作&#xff0c;如地形测量、地籍测绘、海洋测绘等&#xff0c;获取并更新国家基础地理信息数据。这些数据是国民经济建设、城市规划、资源调查、环境保护等各个领域的重要基础资料。对于维护国家地理信息安全、促进国民经济和社会发展具有重要意义…

空间转录组学联合单细胞转录组学揭示卵巢癌生存相关受配体对

卵巢癌&#xff0c;作为女性生殖系统中的一种常见恶性肿瘤&#xff0c;其高级别浆液性卵巢癌&#xff08;HGSC&#xff09;亚型尤其致命。尽管多数患者对初次治疗反应良好&#xff0c;但超过75%的晚期HGSC患者会在治疗后复发&#xff0c;并且对化疗药物产生耐药性。然而&#x…

QT+winodow 代码适配调试总结(二)

已经好多年了&#xff0c; linux环境下不同版本的QT程序开发和部署&#xff0c;突然需要适配window环境程序调试&#xff0c;一堆大坑&#xff0c;还真是一个艰巨的任务&#xff0c;可是kpi下的任务计划&#xff0c;开始吧&#xff01;&#xff01; 1、首先我们自定义的动态库…

Python应用开发——30天学习Streamlit Python包进行APP的构建(10)

st.map 显示一张叠加了散点图的地图。 它是 st.pydeck_chart 的包装器&#xff0c;用于在地图上快速创建散点图表&#xff0c;并具有自动居中和自动缩放功能。 使用该命令时&#xff0c;Mapbox 会提供地图瓦片来渲染地图内容。请注意&#xff0c;Mapbox 是第三方产品&#x…

品牌窜货治理:维护市场秩序与品牌健康的关键

品牌在各个渠道通常都会设定相应的销售规则&#xff0c;其中常见的便是区域保护制度&#xff0c;比如 A 地区的货物只能在 A 地区销售&#xff0c;各区域的产品价格和销售策略均有所不同&#xff0c;因此 A 地区的货物不能流向 B 地区&#xff0c;否则就被称为窜货。 窜货现象不…

【PHP】控制摄像头缩放监控画面大小,并保存可视画面为图片

一、前言 功能描述 调用摄像头并可以控制缩放摄像头监控画面的大小&#xff0c;把可视画面保存为图片。 我使用的是USB摄像头&#xff0c;其他摄像头此方法应该也通用。 使用技术 使用到的技术比较简单&#xff0c;前端使用WebcamJS插件调用摄像头&#xff0c;并摄像头监控…

初识前端工程化

前端工程化 一、接口文档管理 YAPI二、前端工程化1、前端工程化介绍2、环境准备 三、Vue 项目创建&简介1、Vue 项目创建2、Vue 项目简介3、运行 Vue 项目 四、Vue 组件库 Element UI1、Elment UI 简介2、Element UI 入门 五、Vue 项目中使用 axios六、Vue 路由1、Vue 路由简…

一种基于优化信息频带的旋转机械故障诊断方法(MATLAB)

特征提取是滚动轴承故障诊断及状态监测的关键&#xff0c;直接关系到轴承状态预示及故障识别的准确性&#xff0c;也是轴承故障诊断中的研究热点。考虑到轴承故障冲击会导致振动信号的形态改变&#xff0c;进而引起相关统计参数的变化&#xff0c;所以通过振动信号计算的统计量…