HTTP实用指南 ｜ 青训营

初识HTTP协议

初识

背景知识

• 在浏览器地址栏输入一个字符串到页面渲染出东西这个过程中发生了什么？

什么是HTTP

• Hyper Text Transfer Protocol超文本传输协议
• 应用层协议，基于TCP协议
• 请求响应
• 简单可扩展
• 无状态

协议分析

持续发展

HTTP/2概述

如果每次有相关请求都要建立链接，消耗较大。

HTTPS概述

报文解析

• 以1.1协议为例

Method

• Safe (安全的):不会修改服务器的数据的方法(GET HEAD OPTIONS)
• ldempotent(幂等): 同样的请求被执行一次与连续执行多次的效果是一样的，服务器的状态也是一样的，所有safe的方法都是ldempotent的。（GET HEAD OPTIONS PUT DELETE）

状态码

RESTful API

常见请求头

常见响应头

缓存

• 请求头的一个场景
  • 强缓存：如果该资源本地存在，可直接使用。
  • 协商缓存：即使本地有一个缓存，仍需与server端有一个通信验证该资源能否使用的过程。
• 在真实处理这么多缓存中是否有优先级的区别？

cookie

场景分析

静态资源

• 打开CSS请求后有一个index.开头，.css结尾的文件，若抓到了请求且状态码为200，是否有真实的请求网络的过程？

• 若未成功抓包，即 from cache，实际上是从本地缓存里拿到的响应。

• access-control-allow-origin：*代表一个访问控制，*表示允许任意的访问来源请求。
• content-type:text/css; charset=utf-8表示携带的实际信息的资源类型，即CSS文件。

• 第一次打开页面的时候，为让页面尽可能快，将静态资源放在CDN中。

登陆

• 在输入框内输入关键词quick_login，选择ALL，有两个请求。
• 区别
  • 第一个请求：Method为OPTIONS，为经典场景，但存在跨域，所以会有OPTIONS的出现。
    • 什么是跨域？什么时候跨域？

• 默认端口号为443或80，可省略。

• 请求分为简单请求和复杂请求，当请求为复杂请求（生活和生产中大部分都是）时，查明sever端是否允许跨域，才会发起跨域。

• 跨域问题实际上是浏览器的一个叫“同源策略”的安全策略，若通过代理服务器可以绕开浏览器，既可以解决这个问题。

两个问题

• HTTP不是无状态请求吗？为什么能记住登陆态？ 答：涉及到了一个及安全方案
• 大部分网站都使用Session cookie的方案，登陆成功后会发起一个提交的请求，将当天的帐户名密码等相关信息提交给Sever，若正确，Sever会将信息存储起来。
• 也可使用JWT，下一次登陆时将token提交给Sever，Sever判断解析是否有效。

• 简单介绍

实战

浏览器篇

• AJAX之XHR
• AJAX之Fetch
  • Promise能很好地处理回调定域

node篇

• 标准库：HTTP/HTTPS
• 常用的请求库：axios，能进行逻辑判断当前所属的不同的环境，执行相应的请求。

用户体验

网络优化

稳定性

了解更多

通信方式

webSocket

QUIC

这篇好文章是转载于：学新通技术网