HTTP 详解
周玉川
1396
2022.03.23
2022.03.23
发布于 未知归属地
前端HTTP八股文求职面试学习分享

请求报文

请求方法 请求url 协议版本\r\n
请求头
空白行\r\n
请求体

image.png

响应头

HTTP版本 状态码 状态码文本描述 \r\n
头部信息\r\n
\r\n
响应body

http2.0

  • 头部header从本文格式变为帧格式，即改善了语法，解析http头部更加高效

语法：数据格式，语义：规定所要完成的动作，同步：时序关系

  • 头部通过使用静态表/动态表的序号代替特定头部，以及哈夫曼编码实现头部压缩
  • 多路复用，http共享tcp连接，提高效率
  • prefetch自动推送,
<link rel="prefetch" href="">

状态码

1xx 信息响应

  • 100 Continue 继续请求
  • 101 Switching Protocols
  • 103 Easy Hints 针对prefetch

2xx 成功响应

  • 200 请求成功
  • 204 No Content
  • 205 Reset Content 重置表单

3xx 重定向

  • 301 永久重定向,响应可缓存
  • 302 临时重定向 只有在Cache-Control或Expires中进行了指定的情况下，这个响应才是可缓存的
  • 304 Not Modified 资源未修改

4xx 客户端错误响应

  • 400 Bad Request
  • 401 Unauthorized
  • 403 Forbidden
  • 404 Not Found
  • 405 Method Not Allow

5xx 服务端错误响应

  • 500 Internal Server Error服务端内部错误
  • 502 Bad Gateway
  • 503 Service Unavailable

get 和post区别

  • 是否可缓存
    • get 会自动缓存
    • post 请求仅仅包含新鲜度信息时可缓存

问题来了，get如何拿到最新数据，设置Cache-control, 参数添加随机数，换成Post

  • 是否应该含有body
    • get不应该有
    • post必须有，指定Content-Type
  • 是否幂等/安全
    • get 是幂等的，不应该产生副作用，多次请求结果应当是相同的
    • post不是幂等的
  • get 参数是放在path中，是由长度限制的，而post数据放在body中。
  • 浏览器会记录get请求，而post不会

MIME类型

媒体类型 Multipurpose Internet Mail Extensions
通用结构type/subtype

text

表明文件是普通文本，理论上是人类可读

  • text/plain，html，css
  • javascript,传统js脚本类型，但推荐application/javascript

application

表明是某种二进制数据

  • json，pdf，xml，javascript
  • application/octet-stream，应用程序文件的默认值，二进制文件没有特定或已知的 subtype，使用它

image

  • gif，jpeg，png，svg+xml

multipart/form-data

多种类型组合
一般跟着boundary属性指定分割符，例如
Content-Type: multipart/form-data; boundary=aBoundaryString
每种类型会有Content-Type指定当前类型

常见头部

Accept

请求头用来告知（服务器）客户端可以处理的内容类型
格式

Accept: type/subtype[;q=权重] [,type/subtype] [,type/*] [,*/*]

Access-Control-Allow-Credentials

告诉浏览器是否将将Credentials暴漏给前端的JS脚本
唯一有效值为true

一般用来解决跨域自动设置cookie问题，注意Access-Control-Allow-Origin不能为*

Cache-Control

可缓存

  • public 被任何对象缓存
  • private 只能被用户缓存
  • no-cache 强制协商验证
  • no-store 不缓存

常见用法

// 不使用缓存
Cache-Control: no-store
// 验证
Cache-Control: no-cache
Cache-Control: max-age=0, must-revalidate

注意使用max-age=0时，若服务器无响应，则会使用缓存

请求指令

Cache-Control: max-age=<seconds>
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: only-if-cached

响应指令

Cache-Control: max-age=<seconds>
Cache-Control: max-stale[=<seconds>]
Cache-Control: min-fresh=<seconds>
Cache-control: no-cache
Cache-control: no-store
Cache-control: no-transform
Cache-control: only-if-cached

Content-Type

指定资源的类型

当浏览器执行文件嗅探功能时，MIME sniff，可以使用X-Content-Type-Options: nosniff关闭这一行为
格式

Content-Type: type/subtype[;charset=utf-8][;boundary=string(仅仅是multipart/form-data时)]

preflight 预请求

options请求。一般以下格式

OPTIONS /path
Access-Control-Request-Method: Method //真正的请求方法
Access-Control-Request-Headers: origin, x-requested-with//真正请求头部
Origin: https://example.com

Reponse格式

HTTP/1.1 200 OK
Content-Length: 0
Connection: keep-alive
Access-Control-Allow-Credentials: true
Access-Control-Allow-Origin: https://foo.bar.org
Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE
Access-Control-Allow-Headers: 
Access-Control-Max-Age: 86400
评论 (0)