缓存
max-age（强制缓存
通过对比 Etag 与 if-none-match 的值是否相同
若设置了该缓存头，则响应中会带上 Etag (指纹)，比如为 21wedq 。如果未超过 max-age设置的时间，则直接使用本地资源(200, from disk cache)；如果超过设置时间（这时变成了协商缓存）再次请求，客户端会在请求头中加上 if-none-match: 21wedq，服务端会查询请求资源的指纹是否与 if-none-match 带来的相同，如果相同，请求返回 304 Not Modified，如果不相同则返回新的资源，同时会把新的Etag 带上。
如果设置 max-age=0 or no-cache，则每次都会拿etag去服务器询问是否有新的资源，如果有新的资源则返回新的 Etag，如果没有则返回 304 Not Modified
总结：
当返回为 **304 Not Modified** 则说明该资源是被协商缓存了。
no-store（强制不缓存
如果设置呢 no-store ，则响应头中会有 Cache-Control：no-store，Etag: 21wedq。(no-store的意思就是，不用存了)下次发起请求的时候，浏览器并不会在 if-none-match 中携带返回的 Etag ，就像第一次请求数据那样。
if-Match 与 if-none-match
比如在编辑文件的时候，POST请求，服务端返回一个 etag，提交编辑结果的时候，通过ifMatch 字段，携带etag与远程资源比较，如果不一样，则证明被编辑过一次，抛出412，条件失败错误
但是在请求资源的时候，都是使用 if-none-match 来判断资源是否更改
总结
协商缓存
指定 no-cache 或 max-age=0 表示客户端可以缓存资源，每次使用缓存资源前都必须重新验证其有效性。这意味着每次都会发起 HTTP 请求，但当缓存内容仍有效时可以跳过 HTTP 响应体的下载。
强制缓存
对于应用程序中不会改变的文件，你通常可以在发送响应头前添加积极缓存。这包括例如由应用程序提供的静态文件，例如图像，CSS文件和JavaScript文件。另请参阅Expires标题
max-age未过期的时候为强制缓存，过期之后为协商缓存
跨域
什么情况下需要跨域
- 由 XMLHttpRequest 或 Fetch 发起的跨源 HTTP 请求。
- Web 字体 (CSS 中通过
@font-face使用跨源字体资源) - WebGL 贴图
- 使用 drawImage 将 Images/video 画面绘制到 canvas
预检请求
- 使用下列方法之一：
- 除了被用户代理自动设置的首部字段（例如 Connection ，User-Agent）和在 Fetch 规范中定义为 禁用首部名称 的其他首部，允许人为设置的字段为 Fetch 规范定义的 对 CORS 安全的首部字段集合。该集合为：
- Content-Type 的值仅限于下列三者之一：
- text/plain
- multipart/form-data
- application/x-www-form-urlencoded
- 请求中的任意XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问。
- 请求中没有使用 ReadableStream 对象。
Cookie
XMLHttpRequest 或 Fetch 与 CORS 的一个有趣的特性是，可以基于 HTTP cookies 和 HTTP 认证信息发送身份凭证。一般而言，对于跨源 XMLHttpRequest 或 Fetch 请求，浏览器不会发送身份凭证信息。如果要发送凭证信息，需要设置 XMLHttpRequest 的某个特殊标志位。
因此需要在请求中设置
//axios{withCredentials: true}
并且服务端要设置
Access-Control-Allow-Credentials: true
如果相应内容中没有此相应头，则会出现 cookie 跨域问题
附带身份凭证的请求与通配符
对于附带身份凭证的请求，服务器不得设置 Access-Control-Allow-Origin 的值为“*”。
- 当设置为 “*”的时候，相应头并不会返回vary字段（该字段跟缓存相关）
- 设置为域名时，响应头会返回vary：Origin字段
若有收获，就点个赞吧
0 人点赞
