HTTP协议的应用场景分析| 青训营

44 阅读2分钟
本文是在本人2023-08-26发布的《初识HTTP协议,掌握基本概念含义》文章的基础上,对HTTP协议进一步深入学习。如有不对之处,欢迎指出,本人会及时更正。

3.场景分析

具体流程如下:

1.打开chrome

2.输入 www.toutiao.com

3.打开控制台

  • 右键->检查
  • F12

4.切换到network 屏幕截图 2023-08-27 200145.png

场景分析——静态资源

(1)判断状态码200是否一定发起了请求?

如下图: 屏幕截图 2023-08-27 200614.png

(2)缓存策略是怎样的?

  • 强缓存
  • Cache-control:一年

(3)其他信息?

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

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

  • CDN:Content Delivery Network
  • 通过用户就近性和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务。 屏幕截图 2023-08-27 200654.png

场景分析——登录

  • 业务场景

    • 表单登录
    • 扫码登陆
  • 技术方式

    • SSO 屏幕截图 2023-08-27 202040.png
  • 登录流程:

    • 账号密码登录
    • 打开控制台 - network - 勾选 preserve log - 过滤quick_login
    • 观察请求 屏幕截图 2023-08-27 202214.png
  • 分析为什么有options的请求?

    • 跨域,cross-origin
  • 网址分析: "same-origin" "cross-origin" (具体如下图所示) 屏幕截图 2023-08-27 202716.png

场景分析——跨域

  • CORS(Cross-Origin Resource Sharing)
  • 预请求:获知服务端是否允许该跨源请求(复杂请求
  • 相关协议头:
    • Access-Control- Allow-Origin
    • 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
  • 跨域解决方案
    • CORS
    • 代理服务器
      • 同源策略是浏览器的安全策略,不是HTTP的
    • Iframe
      • 诸多不便

场景分析——登录

各位有没有思考过这样一个问题,为什么下一次进入页面能记住登录态呢? 针对这个问题,我们可以从这两个方面分析:

1.向什么地址做了什么动作?

  • 使用POST方法
  • 目标域名:sso.toutiao.com
  • 目标path/quick_login/v2/

2.携带了哪些信息,返回了哪些信息?

  • 携带信息
    • Post body,数据格式为form
    • 希望获取的数据格式为json
    • 已有的cookie
  • 返回信息
    • 数据格式为json
    • 种cookie的信息

SSO:单点登录

image.png

2023-08-27,今日学习就到此为止了,明天继续,加油!!!