第五课 HTTP使用指南之HTTP协议的应用场景分析 | 青训营笔记

76 阅读2分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天。

了解了HTTP的历史发展和协议分析后,我们学习一下HTTP协议的应用场景分析。本节课的重点是静态资源登录

本节课以“今日头条”浏览器为例

场景分析

  1. 打开chrome
  2. 输入www.toutiao.com
  3. 打开控制台
    • 右键->检查
    • F12
  4. 切换到network
  • 静态资源
  • 登录

1.png

静态资源

1.png

状态码200一定发起了请求吗? 1.png 2.png 1.png 根据上图我们可以发现他并没有发起请求,只是从本地缓存里面获取了响应。

1.png 缓存策略是怎样的?

  • 强缓存
  • Cache-control:一年

还有什么信息吗?

  • 允许所有域名访问
  • 资源类型:CSS

静态资源方案:缓存 + CDN + 文件名hash

  • CDN:Content Delivery Network
  • 通过用户就近和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务

1.png

登录

1.png

  • 业务场景
    • 表单登陆
    • 扫码登录
  • 技术方式
    • SSO

1.png

  • 账号密码登录
  • 打开控制台-network -勾选preserve log-过滤quick_login
  • 观察请求

1.png 为什么有options的请求?

  • 跨域,cross-orgin

"same-orgin"同域

"cross-orgin"跨域

1.png 这三部分任意一个部分不一样就会产生跨域问题 3.jpg

跨域

  • CORS ! ( Cross-Origin Resource Sharing )
  • 预请求:获知服务端是否允许该跨源请求(复杂请求)
  • 相关协议头
    • Access- Control- Allow-0rigin
    • Access-Control- Expose-Headers
    • Access-Control-Max-Age
    • Access-Control-Allow-Credentials
    • Access-Control-Allow-Methods
    • Access- Control-Allow-Headers
    • Access-Control- Request-Method
    • Access-Control-Request-Headers
    • Origin

1.png

跨域解决方案

  • CORS
  • 代理服务器
    • 同源策略是浏览器的安全策略,不是HTTP的
  • Iframe
    • 诸多不便

1.png


1.png 2.png 1.png 2.png 1.png 2.png

  1. 向什么地址做了什么动作?
  1. 携带了哪些信息,返回了哪些信息
  • 携带信息
    • Post body,数据格式为form
    • 希望获取的数据格式为json
    • 已有的cookie
  • 返回信息
    • 数据格式json
    • 种cookie的信息

鉴权

  • Session + cookie 1.png
  • JWT (JSON web token) 2.png
  • SSO:单点登录(Single Sign On)

1.png