这是我参与「第五届青训营 」伴学笔记创作活动的第4天
之前学习了一些的HTTP的一些基础理论知识，但是没有看到一些实际的应用场景，今天通过浏览器的开发者工具观察一下HTTP的使用
如何查看
我们打开浏览器，按下键盘上的f12，即可打开开发者工具，点击上方的网络选项卡，即可看到所有的网络请求
之前学习了一些的HTTP的一些基础理论知识，但是没有看到一些实际的应用场景，今天通过浏览器的开发者工具观察一下HTTP的使用
如何查看
我们打开浏览器，按下键盘上的f12，即可打开开发者工具，点击上方的网络选项卡，即可看到所有的网络请求
在右侧可以看到每一个http请求，选中即可看到这个http的详细信息，例如一些常规信息，有请求的URL，请求的方法是get还是post亦或是其他，还有之前我们熟悉的http状态码，表明这个http请求的最终状态。下方还有大量的其他的信息。几乎包含了所有请求头信息，这里不过多展开。
强缓存与协商缓存
有时候我们查看http请求的时候会看到“来自磁盘缓存”这样的字样
这里就要牵扯到缓存了。为了缓解服务器的压力，我们会将一些不常改变的资源缓存在用户的电脑磁盘当中，当请求资源是，如果这个资源没有发生改变，那么就使用用户缓存。而关于是否使用缓存，就牵扯出了强缓存与协商缓存了
- 强缓存
上面那个图片中的缓存就是标准的强缓存，在下面我们可以看到一个cache-control的字段，后面跟了一大串数字，其实那串数字代表的是秒数，指多少秒之内这个资源不会改变，用户直接拿自己磁盘里的资源就好了。说到强缓存其实之前还有一种方式Expires，服务器制定一个时间，让用户在这个时间之前都不需要来拿，但是因为时区的问题导致很少人用了，现在大部分强缓存都是cache-control。顺带一提，强缓存是不需要发送网络请求的，虽然上图的状态码是200，但其实根本没有发出去，故名强缓存
- 协商缓存
这种就是用户发出http请求到了服务器，服务器发现此时资源并没有改变，便让用户继续使用磁盘缓存，如果资源发生了改变，则需要拿新的资源给用户，这一过程很像协商，故名协商缓存，状态码为304。
这个同样有两个字段可以实现这个功能，第一个便是Last-Modified，顾名思义，最近一次修改时间，只要用户发现最近一次的修改时间没有变，则继续使用老的资源，反之亦然。而另外一种方法则是通过生成一个文件标识E-Tag，每次请求资源的时候对边E-Tag，如果不一致则说明文件发生了改变，需要更新，反之亦然
跨域问题
通常来说，服务器与浏览器之间直接发送http请求是会产生跨域问题的（协议，域名，端口号，三者有一项不一致就会产生跨域问题），这个跨域问题主要是因为浏览器的原因，请求没有失败，只是请求发送出去了，服务器也收到了，但是返回的资源被浏览器拦截下来了（好像是因为安全问题），为了解决这个跨域问题，前后端都有比较成熟的方案，但是大部分都是以后端为主，前端配合一起完成的。
后端在返回的请求头中把access-control-allow-origin 配置为*号，意味允许所有用户访问，浏览器即可识别，解决跨域问题。
在右侧可以看到每一个http请求，选中即可看到这个http的详细信息，例如一些常规信息，有请求的URL，请求的方法是get还是post亦或是其他，还有之前我们熟悉的http状态码，表明这个http请求的最终状态。下方还有大量的其他的信息。几乎包含了所有请求头信息，这里不过多展开。
强缓存与协商缓存
有时候我们查看http请求的时候会看到“来自磁盘缓存”这样的字样
这里就要牵扯到缓存了。为了缓解服务器的压力，我们会将一些不常改变的资源缓存在用户的电脑磁盘当中，当请求资源是，如果这个资源没有发生改变，那么就使用用户缓存。而关于是否使用缓存，就牵扯出了强缓存与协商缓存了
- 强缓存
上面那个图片中的缓存就是标准的强缓存，在下面我们可以看到一个cache-control的字段，后面跟了一大串数字，其实那串数字代表的是秒数，指多少秒之内这个资源不会改变，用户直接拿自己磁盘里的资源就好了。说到强缓存其实之前还有一种方式Expires，服务器制定一个时间，让用户在这个时间之前都不需要来拿，但是因为时区的问题导致很少人用了，现在大部分强缓存都是cache-control。顺带一提，强缓存是不需要发送网络请求的，虽然上图的状态码是200，但其实根本没有发出去，故名强缓存
- 协商缓存
这种就是用户发出http请求到了服务器，服务器发现此时资源并没有改变，便让用户继续使用磁盘缓存，如果资源发生了改变，则需要拿新的资源给用户，这一过程很像协商，故名协商缓存，状态码为304。
这个同样有两个字段可以实现这个功能，第一个便是Last-Modified，顾名思义，最近一次修改时间，只要用户发现最近一次的修改时间没有变，则继续使用老的资源，反之亦然。而另外一种方法则是通过生成一个文件标识E-Tag，每次请求资源的时候对边E-Tag，如果不一致则说明文件发生了改变，需要更新，反之亦然
跨域问题
通常来说，服务器与浏览器之间直接发送http请求是会产生跨域问题的（协议，域名，端口号，三者有一项不一致就会产生跨域问题），这个跨域问题主要是因为浏览器的原因，请求没有失败，只是请求发送出去了，服务器也收到了，但是返回的资源被浏览器拦截下来了（好像是因为安全问题），为了解决这个跨域问题，前后端都有比较成熟的方案，但是大部分都是以后端为主，前端配合一起完成的。
后端在返回的请求头中把access-control-allow-origin 配置为*号，意味允许所有用户访问，浏览器即可识别，解决跨域问题。
