这是我参与「第五届青训营 」伴学笔记创作活动的第 7 天
今天是大年初一，祝大家新年大展鸿兔。
3.场景分析
操作方式
- 打开chrome
- 输入www.toutiao.com
- 打开控制台
- 右键->检查
- F12
- 切换到network
静态资源分析
状态码200，一定发起了请求吗？
实际上是本地缓存中获得的
缓存策略是怎么样的？
- 强缓存
- Cache-control:一年
其他信息：
- 允许所有域名访问
- 资源类型：css
静态资源部署方案
核心目的：加快静态资源的访问速度
静态资源方案：缓存+CDN+文件名hash
- CDN : Content Delivery Network
- 通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务
保证用户拿到的资源够快，同时要足够新?
通过设置文件名来保证资源的更新
登录场景
- 账号密码登录
- 打开控制台-network-勾选 preserve log-过滤quick-login
- 观察请求，比较请求的不同（有两个请求）
一个请求Method是options，跨域，cross-origin
根据host name的相同还是不同，来确定请求是同域还是跨域
预请求：获取服务端是否允许该跨源请求（复杂请求），CORS
有很多相关协议头，主要为Access-Control开头的协议头
跨域解决方案
- CORS
- 代理服务器
- 同源策略是浏览器的安全策略，不是HTTP的
- Iframe
- 诸多不便
登陆：1.向什么地址做了什么动作？
- 使用POST方法
- 目标域名sso.toutiao.con
- 目标path/quick_login/v2/
登陆：2.携带了哪些信息，返回了哪些信息？
- 携带信息
- Postbody,数据格式为form
- 希望获取的数据格式为json
- 已有的cookie
- 返回信息
- 数据格式json
- 种cookie的信息
登陆：鉴权
- Session + cookie
- JWT（JSON web token）
- 单点登录 SSO，实现子应用的登陆共享
4.HTTP实战
怎么去发起一个HTTP协议
AJAX之Fetch
- XMLHttpRequet的升级版
- 使用Promise
- 模块化设计，Response,Request,Header对象
- 通过数据流处理对象，支持分块读取 功能相对有限
常用的请求库：axios
- 支持浏览器、nodejs环境
- 丰富的拦截器
