青训营X豆包MarsCode 技术训练营之HTTP实践

52 阅读3分钟

分析稀土掘金的缓存

image.png

  1. 进入调试面板,选择NetWork

image.png 2.选择index其中一个进行分析

image.png 发现Status Code(状态代码)返回200,但是是from disk cache(来自磁盘缓存)的,所以本次请求并没有发送,而是直接从磁盘缓存里面拿的 3.观察下面的Response Headers(响应标头)

image.png

  • Accept-Ranges: bytes:表示:服务器支持范围请求(Range Requests),允许客户端请求资源的一部分而不是整个资源。在这里,范围是以字节为单位指定的。
  • Accesss-Control-Allow-Origin:* 表示:不限制哪些域可以访问资源,任何域下的网页都可以进行跨域请求。
  • Age: 4057:表示响应在传输过程中已经经过了 4057 秒(大约 1 小时 7 分钟)。这通常用于 CDN 或代理服务器,表示缓存的响应已经存在了多长时间。
  • Cache-Control:max-age=86400 表示:缓存方式是强缓存,数字响应可以被缓存的最大时间,这里是 86400 秒(24 小时)。在这个时间段内,浏览器或代理服务器可以重复使用缓存的资源,而不需要再次向服务器发送请求。
  • Content-Encoding: br:表示:响应内容使用了 Brotli 压缩算法进行压缩
  • Content-Length: 17474:表示:指定了响应体的长度,这里是 17474 字节
  • content-Md5: aNN8YuLudE0R270GbQ==:这个头提供了响应内容的 MD5 哈希值,用于验证内容的完整性。
  • Content-Type:application/javascript 表示:当前看的这个请求的文件时是JS类型文件。
  • Cross-Origin-Resource-Policy: cross-origin:表示:资源是否允许跨域访问。在这里,它表明资源可以被跨域访问。

跨域

什么是跨域

浏览器为了保护用户信息安全而实施的一种安全策略。它限制了一个域下的网页如何与另一个域下的资源进行交互。这种策略主要是为了防止恶意网站访问另一个域下的敏感数据,从而保护用户隐私和数据安全。

为什么会有跨域:

从浏览器的同源策略来解释

同源策略是浏览器的一种安全机制,它限制了从一个源加载的文档或脚本如何与来自另一个源的资源进行交互。同源是指协议、域名、端口号都相同。三者有一个不同就是跨域,举例如下:

跨域请求的场景

在现代 Web 开发中,前端应用通常在一个域名下(如www.myapp.com),而后端 API 可能在另一个域名下(如api.mybackend.com)。当前端应用需要获取后端 API 的数据时,就会产生跨域请求。

下一篇介绍我所了解到的一些解决跨域问题的一些方法。