前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
  • HTTP

    • 基础篇

      • HTTP的前世今生
      • HTTP是什么
      • HTTP世界全览
      • HTTP分层
      • 键入网址到回车发生什么
      • HTTP报文是什么样子的
      • 理解请求方法
      • URI
      • 响应状态码
      • HTTP有哪些特点
      • HTTP优缺点
      • HTTP的实体数据
      • HTTP传输大文件
      • HTTP的连接管理
      • HTTP的重定向
      • HTTP的Cookie机制
      • HTTP的缓存控制
      • HTTP的代理服务
      • HTTP的缓存代理
    • 高级篇

    • 扩展篇

  • 浏览器相关

  • 计算机基础

# HTTP是什么

30 秒速记

  • HTTP = 超文本传输协议,一套规定「客户端怎么问、服务端怎么答」的应用层规则
  • 只管两点之间的请求和响应,不管寻址、路由、广播,那是 IP / DNS 这些下层的事
  • 能传任意数据:文字、图片、视频、JSON,靠 Content-Type 告诉对方怎么解读
  • 无状态:服务器默认不记得上一个请求是谁发的,登录态靠 Cookie / Token 补
  • 状态码表达的是处理结果:收到 404 说明网络是通的,是资源找不到

HTTP 可以理解成浏览器和服务器之间约定好的「对话格式」:我用什么方法要什么资源,你告诉我结果和内容。 它是应用层协议,只规定消息长什么样、怎么理解,至于数据包怎么找到服务器、路上怎么走、丢了怎么补,交给 DNS、IP、TCP 去做。名字里叫超文本,其实图片、视频、JSON 什么都能传,Content-Type 告诉对方怎么解读。还有一个特点是无状态,每个请求都是独立的,所以才有了 Cookie 和 Token 来记住用户。

  • HTTP 是一个用在计算机世界里的协议,它确立了一种计算机之间交流通信的规范,以及相关的各种控制和错误处理方式
  • HTTP 专门用来在两点之间传输数据,不能用于广播、寻址或路由
  • HTTP 传输的是文字、图片、音频、视频等超文本数据。
  • HTTP 是构建互联网的重要基础技术,它没有实体,依赖许多其他的技术来实现,但同时许多技术也都依赖于它

把这些综合起来,使用递归缩写方式,我们可以把 HTTP 定义为“与 HTTP 协议相关的所有应用层技术的总和”

原理拆解: HTTP 位于应用层,定义请求方法、目标、头字段、消息体、状态码以及通信双方如何解释这些信息。客户端表达“要对哪个资源做什么”,服务器返回处理结果;至于数据包怎样找到主机、经过哪些网络、是否重传,并不是 HTTP 自己完成的,而是依赖域名解析、传输层和网络层等底层能力。因此,HTTP 规定消息语义,但不承担广播、路由或物理传输。

最小验证: 输入一个获取文本资源的请求,验证 HTTP 如何在两个端点之间表达操作、媒体类型和处理结果。

GET /hello.txt HTTP/1.1
Host: example.com
Accept: text/plain
Connection: close

HTTP/1.1 200 OK
Content-Type: text/plain; charset=utf-8
Content-Length: 12
Connection: close

Hello HTTP!
@前端进阶之旅: 代码已经复制到剪贴板

GET 表达读取操作,/hello.txt 标识当前服务器上的目标资源,Host 指定接收请求的主机,200 OK 表示处理成功。Content-Type 告诉客户端如何解释消息体,Content-Length: 12 对应正文的 12 个 ASCII 字节。若目标不存在,服务器可以改用 404 Not Found;这属于应用层错误表达,不代表底层网络一定失败。

边界与排查: 能承载图片或视频,不等于 HTTP 理解图像和视频内容;它主要通过媒体类型和消息边界运输字节,具体解码由浏览器或其他应用完成。同样,一个请求超时可能来自域名解析、连接建立、传输中断或服务器处理,不能仅凭“页面打不开”判定为 HTTP 协议错误。工程验证应分层观察:先确认主机可达和连接是否建立,再检查请求报文、响应状态码、头字段及正文是否符合约定。

面试官追问

追问 1接口返回 404,产品说服务器挂了,你怎么解释?
参考回答

恰恰说明服务器活着。能收到 404 意味着 DNS、连接、请求、响应整条链路都通了,只是服务器说「这个路径我没有」。服务器真挂了你看到的是连接失败、超时,或者网关给的 502。

追问 2HTTP 是无状态的,那登录后为什么刷新页面还是登录状态?
参考回答

因为浏览器每次请求都自动带上了 Cookie,服务器拿 Cookie 里的 session id 去查是谁。协议本身不记,状态是靠每次请求都重新带身份凭证「补」出来的,Token 放在 Authorization 头里也是同一个思路。

追问 3接口返回图片,前端拿到的是一堆乱码,问题出在哪?
参考回答

多半是读取方式不对。HTTP 只负责传字节,怎么解读看客户端:fetch 要用 res.blob() 而不是 res.text(),axios 要设 responseType: 'blob'。另外检查服务端 Content-Type 是不是正确的 image/png。

追问 4能不能用 HTTP 给局域网上千台设备广播通知?
参考回答

HTTP 做不了广播,它天生是一对一的请求响应。真要推给上千台设备,要么让设备连一个 WebSocket / MQTT 服务订阅消息,要么服务端逐个调用,广播本身是 UDP 层的能力。

基础篇
进阶篇
高频篇
精选篇
手写篇
面经篇
AI 篇
原理篇
每日一题
小程序题库
知识卡片
  • 场景篇按分类整理的大前端场景考点
  • 历年面经按年份追踪真实考点
  • 算法题库NEW在线编码即时判题
  • 专项自测100 题快速查漏
  • 前端基础
    • HTTP从报文一路讲到 HTTPS
    • 浏览器渲染、事件循环、进程
    • 计算机基础Linux、网络、操作系统
  • 进阶专项
    • 设计模式23 种模式怎么用
    • 前端系统进阶学习大型项目工程化
    • 前端综合文章长期沉淀的实践文
  • 工程与工具
    • Node学习指南从环境搭建到服务端
    • NPM工作流script、依赖与发布
    • Docker容器化部署上手
    • Canvas图形与动画实战
  • 路线与导图
    • 思维导图知识点全景图
    • 学习路线按图索骥不跑偏
  • 动态
    • 公众号动态公众号历史文章
    • 博客动态站长的技术博客
    • 开发者导航常用工具与文档站
  • AI 助手随时提问,即时解析
  • AI 模拟面试模拟真实面试 + 报告
  • AI 知识地图串起全站知识点
  • AI 定制路线按你的简历现排
AI 热点
旧版
  • HTTP

    • 基础篇

      • HTTP的前世今生
      • HTTP是什么
      • HTTP世界全览
      • HTTP分层
      • 键入网址到回车发生什么
      • HTTP报文是什么样子的
      • 理解请求方法
      • URI
      • 响应状态码
      • HTTP有哪些特点
      • HTTP优缺点
      • HTTP的实体数据
      • HTTP传输大文件
      • HTTP的连接管理
      • HTTP的重定向
      • HTTP的Cookie机制
      • HTTP的缓存控制
      • HTTP的代理服务
      • HTTP的缓存代理
    • 高级篇

    • 扩展篇

  • 浏览器相关

  • 计算机基础

完整面试题地址:
作者:程序员poetry
扫码关注作者公众号:「前端进阶之旅」 每天分享技术干货
前端进阶之旅公众号二维码

HTTP是什么|HTTP协议篇

# HTTP是什么

30 秒速记

  • HTTP = 超文本传输协议,一套规定「客户端怎么问、服务端怎么答」的应用层规则
  • 只管两点之间的请求和响应,不管寻址、路由、广播,那是 IP / DNS 这些下层的事
  • 能传任意数据:文字、图片、视频、JSON,靠 Content-Type 告诉对方怎么解读
  • 无状态:服务器默认不记得上一个请求是谁发的,登录态靠 Cookie / Token 补
  • 状态码表达的是处理结果:收到 404 说明网络是通的,是资源找不到

HTTP 可以理解成浏览器和服务器之间约定好的「对话格式」:我用什么方法要什么资源,你告诉我结果和内容。 它是应用层协议,只规定消息长什么样、怎么理解,至于数据包怎么找到服务器、路上怎么走、丢了怎么补,交给 DNS、IP、TCP 去做。名字里叫超文本,其实图片、视频、JSON 什么都能传,Content-Type 告诉对方怎么解读。还有一个特点是无状态,每个请求都是独立的,所以才有了 Cookie 和 Token 来记住用户。

  • HTTP 是一个用在计算机世界里的协议,它确立了一种计算机之间交流通信的规范,以及相关的各种控制和错误处理方式
  • HTTP 专门用来在两点之间传输数据,不能用于广播、寻址或路由
  • HTTP 传输的是文字、图片、音频、视频等超文本数据。
  • HTTP 是构建互联网的重要基础技术,它没有实体,依赖许多其他的技术来实现,但同时许多技术也都依赖于它

把这些综合起来,使用递归缩写方式,我们可以把 HTTP 定义为“与 HTTP 协议相关的所有应用层技术的总和”

原理拆解: HTTP 位于应用层,定义请求方法、目标、头字段、消息体、状态码以及通信双方如何解释这些信息。客户端表达“要对哪个资源做什么”,服务器返回处理结果;至于数据包怎样找到主机、经过哪些网络、是否重传,并不是 HTTP 自己完成的,而是依赖域名解析、传输层和网络层等底层能力。因此,HTTP 规定消息语义,但不承担广播、路由或物理传输。

最小验证: 输入一个获取文本资源的请求,验证 HTTP 如何在两个端点之间表达操作、媒体类型和处理结果。

GET /hello.txt HTTP/1.1
Host: example.com
Accept: text/plain
Connection: close

HTTP/1.1 200 OK
Content-Type: text/plain; charset=utf-8
Content-Length: 12
Connection: close

Hello HTTP!
@前端进阶之旅: 代码已经复制到剪贴板

GET 表达读取操作,/hello.txt 标识当前服务器上的目标资源,Host 指定接收请求的主机,200 OK 表示处理成功。Content-Type 告诉客户端如何解释消息体,Content-Length: 12 对应正文的 12 个 ASCII 字节。若目标不存在,服务器可以改用 404 Not Found;这属于应用层错误表达,不代表底层网络一定失败。

边界与排查: 能承载图片或视频,不等于 HTTP 理解图像和视频内容;它主要通过媒体类型和消息边界运输字节,具体解码由浏览器或其他应用完成。同样,一个请求超时可能来自域名解析、连接建立、传输中断或服务器处理,不能仅凭“页面打不开”判定为 HTTP 协议错误。工程验证应分层观察:先确认主机可达和连接是否建立,再检查请求报文、响应状态码、头字段及正文是否符合约定。

面试官追问

追问 1接口返回 404,产品说服务器挂了,你怎么解释?
参考回答

恰恰说明服务器活着。能收到 404 意味着 DNS、连接、请求、响应整条链路都通了,只是服务器说「这个路径我没有」。服务器真挂了你看到的是连接失败、超时,或者网关给的 502。

追问 2HTTP 是无状态的,那登录后为什么刷新页面还是登录状态?
参考回答

因为浏览器每次请求都自动带上了 Cookie,服务器拿 Cookie 里的 session id 去查是谁。协议本身不记,状态是靠每次请求都重新带身份凭证「补」出来的,Token 放在 Authorization 头里也是同一个思路。

追问 3接口返回图片,前端拿到的是一堆乱码,问题出在哪?
参考回答

多半是读取方式不对。HTTP 只负责传字节,怎么解读看客户端:fetch 要用 res.blob() 而不是 res.text(),axios 要设 responseType: 'blob'。另外检查服务端 Content-Type 是不是正确的 image/png。

追问 4能不能用 HTTP 给局域网上千台设备广播通知?
参考回答

HTTP 做不了广播,它天生是一对一的请求响应。真要推给上千台设备,要么让设备连一个 WebSocket / MQTT 服务订阅消息,要么服务端逐个调用,广播本身是 UDP 层的能力。

← HTTP的前世今生HTTP世界全览 →

fe