前端常用的HTTP知识

qqcr
484 阅读3分钟

HTTP协议

应用层协议，联网细节交给TCP/UDP

基本知识

请求/响应的报文

    //request
    <method><request-URL><version>
    <headers>
    
    <entity-body>
    
    //response
    <version><status><response-phrase>
    <headers>
    
    <entity-body>

请求类型

  • get 获取
  • post 新增
  • put 更新资源内容
  • delete 删除
  • options 判断请求权限
  • head 返回headers 可做测试
  • patch 更新部分内容

状态码

  • 1xx 请求需要继续处理
    • 101 切换协议 比如websocket
  • 2xx 正确处理
    • 200 成功
    • 206 返回部分内容 比如大文件下载
  • 3xx 重定向
    • 301 永久重定向 比如资源更换路径或者改名
    • 302 临时重定向 比如需要登录
    • 304 资源未修改 可使用缓存
  • 4xx 客户端错误
    • 400 错误请求
    • 403 拒绝执行 比如没有访问权限
    • 404 资源找不到
    • 413 请求实体过大 比如服务端限制上传大小
  • 5xx 服务端错误
    • 500 服务端内部错误 比如后台数据处理异常
    • 502 作为网关或者代理服务器，上游服务器异常
    • 504 作为网关或者代理服务器，上游服务器处理超时

URL

<schema>://<user>:<password>@<host>
<port>/<path>;<params>?<query>#<frag>

有一些受限字符不建议在url中出现 %/.#?;:$+@&= 非ASCII字符集等，需要encode

headers

  • 通用：
    • Date
    • Connection
  • 请求：
    • User-Agent
    • Accept
  • 响应：
    • Server
    • Last-Modified
  • 实体：
    • Content-Type
    • Content-Length
  • 自定义（X-打头）
Cookie
  • 请求header中带Cookie
  • 响应header中带Set-Cookie
  • 属性：expires、domain、path、httponly、secure、samesite
  • 首次访问，响应中设置times=1，再次请求时候带times=1，下一次再响应时候修改times=2...
  • 安全策略：利用domain、path、httponly、secure、samesite，根据这些属性判断url是否匹配
    • XSS漏洞盗取cookie，设置httponly
    • CSRF漏洞，设置token/samesite
Session
  • 服务器侧对应为Session，基于cookie存放用户信息，Cookie有效期为Session（随着浏览器的进程退出而失效）
Content-type
  • 资源返回的类型，以便浏览器进行解析，有很多种格式
    • text/html
    • text/css
    • application/javascript
    • image/svg+xml
    • image/jpeg
  • 请求中的content-type，标识数据提交的类型，比如post请求，只有几种
    • application/x-www-urlencoded key=value想加
    • multipart/form-data 有文件上传时
    • application/json json数据
    • text/xml
    • 自定义

HTTP中的性能优化

keep-alive

  • HTTP1.0不支持 设置Connection：Keep-alive
  • HTTP1.1默认支持，除非Connection：close

减少网络传输大小

  • 通过编码方式，比如请求时候发送支持的编码格式accept-encoding:gzip,deflate,br,服务器选择某一个编码方式，响应header中带content-encoding:gzip
  • 主要是文本资源的压缩，音视频不适合压缩，文件过小（小于1k）不宜压缩

使用缓存

  • 首次请求 200
  • 二次请求 304
  • 缓存header：
    • 浏览器发送if-modified-since，服务器返回last-modified，这个值是一个日期，指对应文件在服务器存的时间，这个日期可能是不准的，多台服务器日期不一定
    • 浏览器发送if-none-match，服务器返回Etag，是一个编码值，解决last-modified的问题
    • expires强缓存，值是一个日期，不与服务器交互
    • catch-control：max-age缓存多少s秒，no-cache，no-store(不缓存)...
  • Localstorage，维护一些js、css的资源，减少请求
  • ServiceWorker，拦截请求，制定一些规则处理缓存

http2/http3

  • http2
    • 二进制传输
    • 多路复用
    • 头部压缩
    • server push
  • http3
    • 基于QUIC协议（UDP）

工具

HTTP抓包工具

  • Wireshark
  • Fiddler
  • Firebug for Firefox
  • Chrome开发者工具
  • IE8+开发者工具

HTTP发包工具

  • telnet/curl
  • Fiddler
  • Tamper for FireFox
  • Postman for Chrome
  • Paw for OSX
avatar
文章
阅读
粉丝