这是我参与「第五届青训营 」伴学笔记创作活动的第 4 天 本节课主要是针对Http的几个不同的场景，分析了其协议、请求响应头，针对缓存部分做了详细的讲解，同时也提到了在企业中静态资源的常用做法是通过CDN缓存资源，同时针对Options请求方式引申出了跨域这个概念，并针对跨域的解决方法进行了对比分析。
场景分析
- 打开chrome
- 输入 www.toutiao.com
- 打开控制台 右键->检查或者F12(windows)，option+command+i(Mac)
- 切换到network
点击网络中的css请求，可以看到请求头如下：
access-control-allow-origin: *
access-control-request-methods: OPTIONS
access-control-request-methods: HEAD
access-control-request-methods: GET
age: 3810399
ali-swift-global-savetime: 1670494467
cache-control: max-age=31536000
content-encoding: br
content-length: 77810
content-md5: p0LTIRFTA3c+xIJSDr1DAQ==
content-type: text/css; charset=utf-8
date: Thu, 08 Dec 2022 10:14:27 GMT
eagleid: dde5cb2916743048666438021e
etag: W/"a742d321115303773ec482520ebd4301"
last-modified: Thu, 08 Dec 2022 10:09:49 GMT
server: Tengine
server-timing: cdn-cache;desc=HIT,edge;dur=1
timing-allow-origin: *
vary: Accept-Encoding
via: cache56.l2cn3036[0,0,200-0,H], cache18.l2cn3036[1,0], ens-cache15.cn4354[0,0,200-0,H], ens-cache21.cn4354[1,0]
x-cache: HIT TCP_MEM_HIT dirn:11:248702955
x-response-cache: edge_hit
x-server: goofy
x-swift-cachetime: 31535851
x-swift-savetime: Thu, 08 Dec 2022 10:16:56 GMT
x-tos-request-id: 8105f691b9039a886391b903-a92cd4d
x-tos-response-time: Thu, 08 Dec 2022 10:14:27 GMT
x-tos-storage-class: STANDARD
x-tt-trace-host: 01181ded22e28b6d63695ce96447b0cf96bb9cadd6eee26d07806b7c45634ff4291bb1854e605696b957475d1ad34795a272944584b30d46838b4313f62a2699625c0ac81295978234418f6db5fef4003174f4f72c37213ac60c029a4131b7d090
x-tt-trace-tag: id=03;cdn-cache=hit;type=static
其中cache-control表示了该css资源缓存了一年的时间
静态资源的解决方案是：缓存 + CDN + 文件名hash
- CDN（Content Delivery Network）
- 原理是通过用户就近性和服务器负载的判断，CDN确保内容以一种极为高效的方式为用户的请求提供服务
跨域（cross-origin头）
同源：同域名、同端口、同协议
解决方法：
-
CORS
-
代理服务器
-
Iframe（不方便）
业务场景
- 表单登录
- 扫码登录
技术方式
- SSO（单点登录）
