http请求(上篇)

http - Hyper Text Transfer Protocol

客户端发起 => 访问服务端

1.基础请求 = 请求标头（一段描述）+报文主体

• 基础请求 url | methos | dest（目标）
• 请求标头：
  • 添加途径有两种：生成请求时添加header头 / 拦截器（interceptors）

2.请求报头（Request Headers）

1.Accept - 请求内容的期望格式类型

• text（拿过来就能用）：
  • html：HTMl格式
  • plain：纯文本格式
  • xml：XML格式
• image ：gif: gif格式 / jpeg: 图片格式 / png: png格式
• video：mpeg / quicktime
• application（加工和应用的处理）：
  • xhtml+xml / atom+xml / json / pdf / msword / x-www-form-urlencoded

2. Accepet-Encoding - 期望返回内容被压缩

• gzip，deflate，br
  表示期望返回的格式被压缩（好处：减少网络流量，提升性能）
  面试追问：
  a.此属性为要求而非强制，需要服务端支持，方可生效。如服务端不支持或未开启压缩，则不起作用
  b.如服务端支持压缩，或者开启压缩。响应头中可查看：
  Encoding：gzip（当前返回被压缩，并使用gzip格式）

3.Accept-Language - 浏览器所支持的语言

便于国际化、多语言包
zh 表示中文；zh-cn 表示简体中文；en（英文）；fr（法语）

4.Connection - TCP信道的连接

常见：keep-alive(1.1之后默认) / close
面试追问：标识位置？connectId - 代表单个请求新建立的信道索引（ 新建的tcp连接，都有新增的Id，可在network中右键打开查看）

5.Cookie - 缓存形式

面试追问方向：
a.集中缓存的对比 - cookie vs localStorage vs sessionStorage
从以下几个方面作答：

大小：storage >> cookie
性能：cookie每次请求都会携带，影响性能 => 网络性能优化
跨域：cookie无法跨域调用，需要指定一个作用域 => 跨域问题
时效性：session - 当前页面；local- 跟随浏览器（关闭浏览器，tab都不会删除）；cookie - 过期时间 （根据服务端设置的过期时间，过期时间内长期有效）
跨tab共享：sessionStorage不支持跨tab；localStorage - 同源窗口支持共享；cookie - 同源窗口共享；

b. 性能监控（不同tab同步，在一个页面更新，另一个页面实时更新，或弹窗提示，检测到内容有更新，请刷新）
解决：

window.addEventListener(“storage”, e => {})

存储位置：存储在浏览器

6.Referer - 请求资源地址

7.User-Agent - 用户侧信息

追问：
内容包含 - 操作系统/版本、浏览器版本、设备信息（移动端）版本
兼容性

8.Sec-Fetch-Dest\Sec-Fetch-Mode\Sec-Fetch-Site

a. mode - 请求的模式

• cors: 跨域请求
• no-cors: 限制请求
• same-origin: 同源请求
• navigate: 浏览器切换页面行为
• websocket: 建立websocket连接

b. dest - 请求目标，如何使用获取的数据
empty / iframe / font / image

c. site - 请求发起者和资源之间的关系
cross-site: 跨域请求
same-origin: 发起方和目标一致
none

9.q=0.01 - 参数优先级

a. q值越高代表优先级越高 0=<q<=1 [0,1]
b.默认不写，优先级 q=1
c.写法： ;q=0.8

3.预检请求 & 跨域请求

1.什么是跨域

“域”（Origin）浏览器地址栏中的主机地址
“跨域” - 当前网页应用请求的主机地址与本浏览器中主机地址不同 => 我们的网页应用想要去隔壁家取资源（只有浏览器场景才会有）=> 服务端会做http转发会存在跨域问题吗？ 不会

2.构成跨域的条件

a. domain不同（域名或者ip）
b. 端口不同
c. 协议不同（http / https）

3.cors的概念？

CORS - cross-origin resource sharing

4.什么是简单请求？

满足以下两个条件
a.请求方法： HEAD GET POST
b.请求header只能包含accept、accept-language、content-language、content-type - x-www-form-urlencoded + form-data+plain

5.对于简单请求与非简单请求 ，浏览器不同的处理方式

1. 对于简单请求来说，请求跨域 => 放行请求发出（ 浏览器发出cors请求、并且携带origin） => （不管服务端反悔什么）浏览器拦截返回 => 检查response的header中有没有Access-Control-Allow-Origin（Access-Control-Allow-Origin：资源是否共享；如没有则终止请求并报错）
2. 发出非简单cors请求 => 浏览器会做一个查询请求（预检请求：即options，然后按照简单请求来处理）
   面试追问：
   option请求是啥？/ 或者：options请求出现的场景以及作用？
   答：预检请求，场景：非简单请求，判断cors请求能不能被发送。
   追问2：
   为什么这样做？安全性
   简单请求不会包含本端的信息（机密性id信息），不会造成用户信息的风险。如果header里包含其它信息，则会发送到其他端。

3.响应参数

1. Access-Control-Allow-Origin: * （任意域名请求都可以被接收）/ Origin
2. Access-Control-Allow-Credential: 是否允许发送cookie

4.http状态码

1. 1xx 信息提示： 100 - continue、 101 - 切换

2. 2xx 成功：200 - 请求成功、201 - 创建完成、 204 - 无内容

3. 3xx 重定向：301 - 永久重定向 / 302 - 对象已移动 / 304 - 资源未修改 / 307 - 临时重定向

• 301 vs 302 => 跳转
  302 - 短链接转长链接 => 点击短链接 => 对象已移动 => 浏览器自动跳转到长链接

• 302 vs 304 => 缓存
  a. 强缓存 => 不给服务端发请求 => 返回200状态码 并且 标识 from cache（从缓存中获取）
  b. 协商缓存 => 由服务端参考决定是否缓存（客户端与服务端发生一次通信，如果命中协商缓存，服务器会返回304）
  对比：
  强缓存 根据=> Expires(资源失效的时间) + cache-control（1.1的规范）/ max-age=3600（s）
  => 同时存在时优先级：cache-control > Expires
  协商缓存 => Last-Modified(当前资源最后修改时间) + If-modified-Since + ETag => ETag计算会有性能损耗

（待更新：websocket => 扫码 => 性能）