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

HTTP 协议的应用场景分析

场景分析

访问toutiao.comPC站，对静态资源进行分析

• 问题：状态码是200？那它一定是经过完整的链路吗？
• 从Status Code: 200 (from disk cash)可以知道，该响应是从硬盘缓存中得到的
• 问题：缓存策略是怎么样的
• cache-control -> 是强缓存相关协议头，则说明静态资源设置了强缓存相关的一个策略
• maxage -> 从秒换算后可以得知是一年的时间
• access-control-allow-origin: * -> 允许所有域名访问
• content-type -> CSS文件

静态资源部署方案

目的：性能优化/用户体验优化 (即用户能越快地看到页面及越早地能进行一些可交互的行为是越好的, 一定程度上来说，用户越快访问到静态资源的速度，体验也越好)

1. 缓存
2. 首次访问没有缓存时，会使用CDN(把静态资源放在CDN[内容发放网络]上) 比如说 北京的用户需要一个静态资源，那么会优先地从北京这个边缘站拿，(由于物理距离的原因，拿到静态资源的时间确实会缩短，确实提高了体验)，若边缘站没有，则会去中心站拿，若中心站也没有，就会去源站拿(遵循若近的节点有，则到近的节点拿，若近的节点没有，则一步步回源上去，一定保证也能拿到内容)
3. 文件名hash -> (每次当文件有变化时，文件名中的hash值就会变化，使用React 和 Vue的话，可能还会在文件名中加版本号)[算文件名hash一般是在打包时做的]，这样保证了无论max-age设置为多久，每次刷新，只要文件发生改变(文件名也变了)，就一定回去访问最新的资源

访问toutiao.comPC站，对登录进行分析

• 表单登录
• 扫码登录

(preserve log的目的：登录涉及到跳转，正常情况下，只会记录跳转到主页面后的请求[如果遇到页面有重定向的，譬如登录等页面，在点击登录后network下的请求记录会清空并从登录后主页面开始记录，但是我们想要看的恰恰就是登录的动作所发送的请求], 勾选preserve log，则不会清除历史记录，我们就可以看到过去的请求了，包括登录相关的请求)

• www.toutiao.com vs https://sso.toutiao.com => 域名不同，跨域了
• 域名相关知识⬇️

要 scheme, host name, port 都相同，否则即判定为跨域

跨域问题是由于浏览器的同源策略(浏览器的安全策略)才存在的

• 跨域的解决方案⬇️
  1. CORS

跨域请求，大部分情况下(复杂请求，[请求有简单请求和复杂请求两类，只有复杂请求才会发起跨域请求]，实际生产下大部分场景使用的都是复杂请求)会先发起一个预请求(如method: options)，通过这个请求去知晓服务端是否允许我们这次跨域的资源，如果允许则继续

2. 其它的解决方案

• 代理服务器：绕开了浏览器的安全策略，应用的比较多，比如说开发时，Webpack提供的代理服务器功能
• 借助Iframe通信： 限制较多，实际使用该方法解决跨域问题的情况较少

在了解了前置知识后，现在回到对登录的分析上去🔙

• 两种主流的鉴权方案(session-cookie, JWT)

两种方案皆在实际生产中有较多的使用，但session在服务器端是有存的，token在服务器端是没存的(是按一定规则算出来到底合不合法)

• 场景：点击写文章，会跳转到头条号的地址，域名发生了改名，可登录状态也被携带过去了，这是怎么实现的呢

使用单点登录进行解决，但实际生产中，会根据需求做一些自己的实现