前端如何使用http相关知识

我是qd
202 阅读6分钟

事先声明，我看了好多文章，都是把 http 整个知识复制当成一篇文章，没有一点主次。很多时候，我们只使用20%主要知识，解决80%问题，本文写的都是平时能使用，或者你把当成一篇学习http的目录。

##1 http 知识普

这里我只贴别人文章

前端基础篇之HTTP协议 那些前端应该知道的HTTP知识

书籍：

  • 图解http
  • http 权威指南

更多书籍名单

##2 查看 http 报文

2.1 学会使用chrome network

  1. 最基本使用技能点：查看某个接口请求、请求方式、请求code、请求时间、请求消耗时间等
  2. 稍微复杂技能点，直接看这篇11+ chrome高级调试技巧，学会效率直接提升666%

2.2 code 码

  1. 404 请求路径找不到。出现这个问题，作为前端开发，不要急着找后端，先看看自己接口路径有没有写错。这里涉及到前端一个路径比对技巧——用 chrome console 调试面板输入'client_path'==='serve_path'，回车看输出结果是false还是true。

  2. 500 以上错误服务端错误。出现这个问题，直接找后端排查。（如果你学了http知识，不知道500以上是服务端问题，还在纠结前端怎么解决，是不是学了等于白学）

  3. 301、302 ，这2个code只有在面试题出现，所以答案即：就是301是永久重定向，而302是临时重定向。如果在详细点答案，看这篇301和302的区别。如果是口头面试回答，这2种回答只能算普通，这里我润色一下：

301是永久重定向，而302是临时重定向。
301比较常用的场景是使用域名跳转。302用来做临时跳转 比如未登陆的用户访问用户中心重定向到登录页面。
作为前端开发，很少涉及这2个code应用场景，一般是服务端或http服务工具做的事情，如果真的使用此场景，应该找运维同事看看具体业务场景适不适合，他们更有经验些。

参考：nodejs 模拟301、302实现重定向

  1. 304 缓存。也是面试题目出现的，一般结合 etag 和 last-modified考一下，看这篇理解浏览器缓存以及304状态码

  2. 其他略

ps： 像301、302、304，在前端开发基本没用，成为历史包袱，跳槽的时候背一下就得了。

2.3 http method

使用get、post 就够了。像delete、update等，简直就是槽点，因为不是所有平台都支持http method所有方法，另外还增加前端使用成本，并且还极容易出错（尤其项目涉及开发众多，那简直是乱用）。

2.4 cookie

前端使用 cookie 有2个场景（前提请求头设置credentials=include）

  1. cookie携带登录态，服务端设置http-only
  2. cookie 携带灰度环境标识

##3 https 安全协议

https = http + ssl

https 请求可以分为3个过程（这里加key3、key2、key1方便大家理解）

  1. 证书验证，获取非对称加密公钥。过程是：服务端存着证书数字签名，当客户端发送请求，服务端返回非对称加密公钥 + 证书数字签名的验密包，客户端预设ca验证证书，去验证数字签，如果验证通过，获取非对称加密公钥key3。
  2. 非对称加解密，获取对称秘钥key1。过程是：客户端用非对称加密公钥key3。将对称秘钥key1验密包发送给服务端，服务用非对称解密私钥key2解密，获取key1。
  3. 对称解密。过程是：直接用key1通信。

非对称加解密，缺点：慢；优点：安全。 对称加解密，缺点：快；优点：不安全。

https 采取http + ssl 综合方式，即安全且速度适中。有一个场景可以直接http的：假设你所在公司，服务端存在一个局部内网，不涉及安全问题，在前端ssr项目，内网请求是可以采用http的。

ps： https 证书可以自制。自制的证书效果就如同：使用 iphone 下载第3方app，需要认证一个数字证书。说白证书验证都是差不多过程。提供一个 nginx 自制 https 证书教程

参考：

一个故事讲完https

4 http2

对于 http2 有哪些改变？说实在这个对前端不重要，只需知道它对前端性能有很大提升。作为前端开发话，需要等待机会，将公司 http1.0 升级为 http2。

HTTP/2 相比 1.0 有哪些重大改进？ http2 和 http1.0 d对比测试

小公司有一定机会前端可以参与 http1.0 升级 http2.0，但在大公司哪里，这块是在运维架构平台管理着，需要走审批流程。如果你还想尝试，可以自制个人网站

5 前端关于 http 性能优化汇总

  1. 前端http缓存，那个code返回304的。
  2. http2（主要多路复用，性能提升巨大）
  3. 前端优化之DNS预解析
  4. 预加载，如果要维持首屏加载指标，勿用。
  5. nginx combo，在不能升级http2情况，http1.0 实现多路复用效果
  6. 等等

ps： 题外话，不论面试题还是什么来着，一提到性能优化，就想做代码优化，搞这搞那？都是错的，第1步，而是看看当前是不是有价值做性能优化。怎么判断了？通过当前项目性能指标现状，如果公司有性能指标工具，那就使用公司，如果没有，去寻找市面上主流开源的工具来代替，工具如：livehouse。

6 安全问题

前端防御性编程

总结

  1. 对前端来说，http 知识能够使用点很少，无非2类：1、和后端对接；2、前端性能优化。真想琢磨，可以自己玩nginx，但那是另外一回事。
  2. 计算机术语，有时候不是人看的。所以，我们当对http相关知识理解了，最好把对应术语转化成人话。

ps：我自己初看https，一堆乱七八糟名词，其实https就是一个很简单http不安全问题的解决方案。为什么很简单？如果你不信，可对比你公司业务项目架构，我相信大多数有收益业务项目，一定不简单。了解过后，你再回过头在看 https 简单很。为什么说这个？我看很多前端同事，能够熟悉复杂的业务，一碰到简单技术原理就是十分畏惧。没有必要畏惧，应该采用分治方法，把问题化小。

avatar
文章
阅读
粉丝