[ HTTP 协议的应用场景分析 | 青训营笔记]

这是我参与「第五届青训营 」伴学笔记创作活动的第 16 天，以下是我根据课程内容整理的笔记。

课程重点

1. 场景分析 - 静态资源
2. 场景分析 - 登录
3. 场景分析 - 跨域

笔记内容

准备

1. 打开chrome

2. 输入 www.toutiao.com

3. 打开控制台

   • 右键->检查

   • F12

4. 切换到network

静态资源

缓存策略是怎样的？

• 强缓存
• Cache-control:一年

还有什么信息吗？

允许所有域名访问
资源类型：css

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

• CDN: Content DeliveryNetwork

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

登录

• 业务场景

  • 表单登录

  • 扫码登录

• 技术方式

  • SSO

• 账号密码登陆

• 打开控制台 -- network -- 勾选preserve log -- 过滤quick_login

• 观察请求

为什么有options的请求？

• 跨域，cross-origin

Origin A	Origin B
example.com:443	www.evil.com:443	cross-origin:different domains
	example.com:443	cross-origin:different subdomains
	login.example.com:443	cross-origin:different subdomains
	www.example.com:443	cross-origin:different schemes
	www.example.com:80	cross-origin:different ports
	www.example.com:443	same-origin:exact match
	www.example.com	same origin: implicit port number (443) matches

跨域

• 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

跨域解决方案

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

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

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

2.携带了哪些信息，返回了哪些信息

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

结语

通过本次课程的学习，真的收获到了许多，初步了解了场景分析的静态资源、登录、跨域