周星星

Appearance

前言 ​

在我发了一篇html2canvas总是跨域，一步到位后，有位字节的大佬提醒了我一下，为什么我生成的base64图片的地址在浏览器地址栏直接打开，底部会有留白的问题，简直就是恍然大悟。

地址栏输入的地址会发生什么？ ​

这里就不讲述HTML的渲染过程啥，下次再给大家写一篇分享一下。肯定是会有请求的，我们会发现是get请求。

image.png

在前后端交互的过程中，使用频率最高的莫过于 GET 和 POST 这两个方法，有时会可能你还发现有一个OPTION（这个称谓预请求，用来处理跨域请求，这不做阐述）

今天我们就来深扒一下GET 和 POST 两个方法到底有何异同。

相同点 ​

如果我要说， GET 和 POST 的本质是相同的，不知道有多少人会有异议？

GET 和 POST 方法只是 HTTP 协议为了不同分工而规定的两种请求方式。

HTTP 是什么？HTTP 是基于 TCP/IP 的关于数据如何在万维网中如何通信的协议。

HTTP 的底层是 TCP/IP。所以 GET 和 POST 的底层也是 TCP/IP，也就是说，GET 和 POST 都是 TCP 链接。所以说，它们的本质是相同的。

GET 和 POST 之所以产生，要通过HTTP的规则和浏览器/服务器的限制进行区分，使它们在应用过程中体现出不同。

整个请求过程大概是这样的：

  • 客户端 IP 发出请求。
  • 发出的请求数据包会通过 TCP ，经网络传输给远程服务端 IP。
  • 服务端 IP 收到请求包之后，解析并处理请求包最后服务端会通过 TCP 将处理结果返回给客户端。
  • 用户便可以查看到想要的响应数据。

区别点 ​

虽然说 GET 和 POST 请求的本质是相同的 —— 都是 TCP 连接，但是，在平时的使用中还是存在一定区别的。

我们这里所说的区别其实都是约定俗成的一些东西，有些区别的界限可能不是很明确。

作用不同 ​

既然是为了不同分工而产生的两种方法，那么它们作用肯定是不同的：

  • GET 多用于从服务端获取资源
  • POST 一般用来向服务端提交资源

其实这是一句废话，之所以列出来，是为了内容更全面一些。

参数传递方式不同 ​

这一点应该是我们能够最直观地观察到的。

  • GET 的参数一般是通过 ? 跟在 URL 后面的，多个参数通过 & 连接，比https://api.uomg.com/api/rand.img2?sort=%E7%BE%8E%E5%A5%B3&format=json。
  • POST 的参数一般是包含在 request body 中的image.png

其实，这个区别不是绝对的，GET 也可以通过 params 携带参数，而 POST 的URL 后面也可以携带参数，只是我们通常不建议这么做而已。曾经的我，就糊涂的把POST后面加上参数去请求，后端那边一直找不到原因所在

安全性不同 ​

因为参数传递方式的不同，所以 GET 和 POST 的安全性不同：GET 比 POST 更不安全，因为参数直接暴露在URL上，所以 GET 不能用来传递敏感信息。

从传输的角度来说，他们都是不安全的，因为 HTTP 在网络上是明文传输的，只要在网络节点上捉包，就能完整地获取数据报文，要想安全传输，就只有加密，也就是 HTTPS。

参数长度限制不同 ​

GET 和 POST 传递参数的长度不同：

  • get传送的数据量较小，不能大于2KB。
  • post传送的数据量较大，一般被默认为不受限制。

在这里我们要明确一点：HTTP 协议没有 Body 和 URL 的长度限制，对 URL 限制的大多是浏览器和服务器的原因。

服务器是因为处理长 URL 要消耗比较多的资源，为了性能和安全（防止恶意构造长 URL 来攻击）考虑，会给 URL 长度加限制。

参数数据类型不同 ​

参数的数据类型，GET 只接受 ASCII 字符，而 POST 没有限制。

编码方式不同 ​

GET 请求只能进行 URL 编码（application/x-www-form-urlencoded）

POST 支持多种编码方式（application/x-www-form-urlencoded 或 multipart/form-data。为二进制数据使用多种编码。）

缓存机制不同 ​

这个需要从以下几点来说明：

  • GET 请求会被浏览器主动cache，而 POST 不会，除非手动设置。
  • GET 请求参数会被完整保留在浏览器历史记录里，而 POST 中的参数不会被保留。
  • GET 产生的 URL 地址可以被 Bookmark，而 POST 不可以。
  • GET 在浏览器回退时是无害的，而 POST 会再次提交请求。

时间消耗不同 ​

GET 和 POST 请求时间的不同主要是因为：

  • GET 产生一个 TCP 数据包；
  • POST 产生两个 TCP 数据包。

对于 GET 方式的请求，浏览器会把 header 和 data 一并发送出去，服务器响应 200（返回数据）；而对于 POST，浏览器先发送 Header，服务器响应 100 continue，浏览器再发送 data，服务器响应 200 ok（返回数据），详细分析一下：

请求过程不同 ​

POST 请求的过程： ​

  1. 浏览器请求 TCP 连接（第一次握手）
  2. 服务器答应进行 TCP 连接（第二次握手）
  3. 浏览器确认，并发送 POST 请求头（第三次握手，这个报文比较小，所以 HTTP 会在此时进行第一次数据发送）
  4. 服务器返回100 Continue响应
  5. 浏览器发送数据
  6. 服务器返回 200 OK响应

GET 请求的过程： ​

  1. 浏览器请求 TCP 连接（第一次握手）
  2. 服务器答应进行 TCP 连接（第二次握手）
  3. 浏览器确认，并发送 GET 请求头和数据（第三次握手，这个报文比较小，所以 HTTP 会在此时进行第一次数据发送）
  4. 服务器返回 200 OK响应

在网络环境好的情况下，发一次包的时间和发两次包的时间差别基本可以无视。而在网络环境差的情况下，两次包的TCP在验证数据包完整性上，有非常大的优点。

总结 ​

GET 和 POST 的异同点就总结了这么多，大部分内容都是搜刮得来的，主要是自己也想总结一下，站在巨人的肩膀上借鉴一下

最后揭晓谜底，底部留白的原因就是：get请求有大小限制，不能大于2KB，大于的浏览器自动帮我们裁掉了。还是要感谢大佬的指点，让我又复习了一次

拓展 ​

- 【前端 · 面试 】HTTP 总结（五）—— GET 和 POST