HTTP实用指南 | 青训营笔记

92 阅读8分钟

这是我参与「第四届青训营 」笔记创作活动的的第5天

1、初识HTTP

Hyper Text Transfer Protocol(超文本传输协议)

image.png

1.1 http的特点

  • 应用层协议,基于TCP协议
  • 分为请求和响应两个过程
  • 简单可扩展
  • 无状态

image.png

2、协议的发展过程

image.png

2.1 协议内容分析

image.png

2.1.1 Method--请求方式

image.png

2.1.2 方法分类

image.png

2.1.3 状态码

image.png

2.2 RESTful API--(一种API设计风格,REST--Represetational State Transfer)

2.2.1 RESTful API 特点

  • 每一个URL代表一种资源
  • 客户端和服务器之间,传递这种资源的某种表现层
  • 客户端通过HTTP method,对服务器端资源进行操作,实现“表现层状态转化”

image.png

2.3 常用请求头

image.png

2.4 常用响应头

image.png

2.5 浏览器缓存

2.5.1 浏览器缓存过程

image.png

image.png

2.5.2 浏览器缓存分类

根据上图,浏览器在第一次请求发生后,再次发送请求时:

(1)浏览器请求某一资源时,会先获取该资源缓存的header信息,然后根据header中的Cache-Control和Expires来判断是否过期。若没过期则直接从缓存中获取资源信息,包括缓存的header的信息,所以此次请求不会与服务器进行通信。这里判断是否过期,则是强缓存相关。后面会讲Cache-Control和Expires相关。

(2)如果显示已过期,浏览器会向服务器端发送请求,这个请求会携带第一次请求返回的有关缓存的header字段信息,比如客户端会通过If-None-Match头将先前服务器端发送过来的Etag发送给服务器,服务会对比这个客户端发过来的Etag是否与服务器的相同,若相同,就将If-None-Match的值设为false,返回状态304,客户端继续使用本地缓存,不解析服务器端发回来的数据,若不相同就将If-None-Match的值设为true,返回状态为200,客户端重新机械服务器端返回的数据;客户端还会通过If-Modified-Since头将先前服务器端发过来的最后修改时间戳发送给服务器,服务器端通过这个时间戳判断客户端的页面是否是最新的,如果不是最新的,则返回最新的内容,如果是最新的,则返回304,客户端继续使用本地缓存。

强缓存

强缓存是利用http头中的Expires和Cache-Control两个字段来控制的,用来表示资源的缓存时间。强缓存中,普通刷新会忽略它,但不会清除它,需要强制刷新。浏览器强制刷新,请求会带上Cache-Control:no-cache和Pragma:no-cache。

Expires

Expires是http1.0的规范,它的值是一个绝对时间的GMT格式的时间字符串。如我现在这个网页的Expires值是:expires:Fri, 14 Apr 2017 10:47:02 GMT。这个时间代表这这个资源的失效时间,只要发送请求时间是在Expires之前,那么本地缓存始终有效,则在缓存中读取数据。所以这种方式有一个明显的缺点,由于失效的时间是一个绝对时间,所以当服务器与客户端时间偏差较大时,就会导致缓存混乱。如果同时出现Cache-Control:max-age和Expires,那么max-age优先级更高。如我主页的response headers部分如下:

cache-control:max-age=691200

expires:Fri, 14 Apr 2017 10:47:02 GMT

那么表示资源可以被缓存的最长时间为691200秒,会优先考虑max-age。

Cache-Control

Cache-Control是在http1.1中出现的,主要是利用该字段的max-age值来进行判断,它是一个相对时间,例如Cache-Control:max-age=3600,代表着资源的有效期是3600秒。cache-control除了该字段外,还有下面几个比较常用的设置值:

(1) no-cache:不使用本地缓存。需要使用缓存协商,先与服务器确认返回的响应是否被更改,如果之前的响应中存在ETag,那么请求的时候会与服务端验证,如果资源未被更改,则可以避免重新下载。

(2) no-store:直接禁止游览器缓存数据,每次用户请求该资源,都会向服务器发送一个请求,每次都会下载完整的资源。

(3) public:可以被所有的用户缓存,包括终端用户和CDN等中间代理服务器。

(4) private:只能被终端用户的浏览器缓存,不允许CDN等中继缓存服务器对其缓存。 Cache-Control与Expires可以在服务端配置同时启用,同时启用的时候Cache-Control优先级高。

协商缓存

协商缓存就是由服务器来确定缓存资源是否可用,所以客户端与服务器端要通过某种标识来进行通信,从而让服务器判断请求资源是否可以缓存访问。

普通刷新会启用弱缓存,忽略强缓存。只有在地址栏或收藏夹输入网址、通过链接引用资源等情况下,浏览器才会启用强缓存,这也是为什么有时候我们更新一张图片、一个js文件,页面内容依然是旧的,但是直接浏览器访问那个图片或文件,看到的内容却是新的。

这个主要涉及到两组header字段:Etag和If-None-Match、Last-Modified和If-Modified-Since。上面以及说得很清楚这两组怎么使用啦~复习一下:

Etag和If-None-Match

Etag/If-None-Match返回的是一个校验码。ETag可以保证每一个资源是唯一的,资源变化都会导致ETag变化。服务器根据浏览器上送的If-None-Match值来判断是否命中缓存。

与Last-Modified不一样的是,当服务器返回304 Not Modified的响应时,由于ETag重新生成过,response header中还会把这个ETag返回,即使这个ETag跟之前的没有变化。

Last-Modify/If-Modify-Since

浏览器第一次请求一个资源的时候,服务器返回的header中会加上Last-Modify,Last-modify是一个时间标识该资源的最后修改时间,例如Last-Modify: Thu,31 Dec 2037 23:59:59 GMT。

当浏览器再次请求该资源时,request的请求头中会包含If-Modify-Since,该值为缓存之前返回的Last-Modify。服务器收到If-Modify-Since后,根据资源的最后修改时间判断是否命中缓存。

如果命中缓存,则返回304,并且不会返回资源内容,并且不会返回Last-Modify。

image.png

2.6 cookie--包含一些数据信息--常以键值对表示

image.png

2.6.1 cookie的http请求

image.png

我们在发送HTTP请求时,发现游览器将我们的cookie都进行了携带 (注意:游览器只会携带在当前请求的url中包含了该cookie中path值的cookie) ,并且是以key:value的形式进行表示的。多个cookie用;进行隔开。

2.6.2 cookie的http响应

image.png

通过抓包,我们发现在HTTP响应中, cookie的表示形式是,Set-Cookie:cookie的名字,cookie的值。如果有多个cookie,那么在HTTP响应中就使用多个Set-Cookie进行表示。

2.6.3 cookie的生命周期

cookie有2种存储方式,一种是会话性,一种是持久性。

会话性

如果cookie为会话性,那么cookie仅会保存在客户端的内存中,当我们关闭客服端时cookie也就失效了

持久性

如果cookie为持久性,那么cookie会保存在用户的硬盘中,直至生存期结束或者用户主动将其销毁。 cookie我们是可以进行设置的,我们可以人为设置cookie的有效时间,什么时候创建,什么时候销毁。

2.7 https--HyperText Transfer Protocol Secure

image.png

加密方式

image.png

3、场景分析

3.1 跨域

3.1.1 跨域的概念

当一个请求url的协议、域名、端口三者之间任意一个与当前页面url不同即为跨域

image.png

3.1.2 出现跨域的原因

出于浏览器的同源策略限制。同源策略(Sameoriginpolicy)是一种约定,它是浏览器最核心也最基本的安全功能,如果缺少了同源策略,则浏览器的正常功能可能都会受到影响。可以说Web是构建在同源策略基础之上的,浏览器只是针对同源策略的一种实现。同源策略会阻止一个域的javascript脚本和另外一个域的内容进行交互。所谓同源(即指在同一个域)就是两个页面具有相同的协议(protocol),主机(host)和端口号(port)

3.1.3 跨域的解决方案

1、CROS

image.png

2、代理服务器

image.png

详情请看此处链接:# 什么是跨域?跨域解决方法