这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天。
了解了HTTP的历史发展和协议分析后,我们学习一下HTTP协议的应用场景分析。本节课的重点是静态资源和登录。
本节课以“今日头条”浏览器为例
场景分析
- 打开chrome
- 输入www.toutiao.com
- 打开控制台
- 右键->检查
- F12
- 切换到network
- 静态资源
- 登录
静态资源
状态码200一定发起了请求吗?
根据上图我们可以发现他并没有发起请求,只是从本地缓存里面获取了响应。
缓存策略是怎样的?
- 强缓存
- Cache-control:一年
还有什么信息吗?
- 允许所有域名访问
- 资源类型:CSS
静态资源方案:缓存 + CDN + 文件名hash
- CDN:Content Delivery Network
- 通过用户就近和服务器负载的判断,CDN确保内容以一种极为高效的方式为用户的请求提供服务
登录
- 业务场景
- 表单登陆
- 扫码登录
- 技术方式
- SSO
- 账号密码登录
- 打开控制台-network -勾选preserve log-过滤quick_login
- 观察请求
为什么有options的请求?
- 跨域,cross-orgin
"same-orgin"同域
"cross-orgin"跨域
这三部分任意一个部分不一样就会产生跨域问题
跨域
- 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
跨域解决方案
- CORS
- 代理服务器
- 同源策略是浏览器的安全策略,不是HTTP的
- Iframe
- 诸多不便
- 向什么地址做了什么动作?
- 使用POST方法
- 目标域名sso.toutiao.com
- 目标path/quick_login/v2/
- 携带了哪些信息,返回了哪些信息
- 携带信息
- Post body,数据格式为form
- 希望获取的数据格式为json
- 已有的cookie
- 返回信息
- 数据格式json
- 种cookie的信息
鉴权
- Session + cookie
- JWT (JSON web token)
- SSO:单点登录(Single Sign On)