为什么有些POST请求会触发两次HTTP请求？

这个问题需要从浏览器的「同源策略」开始讲起。

什么是同源策略呢？

我的理解是，为了安全起见，浏览器只允许「同源」下的资源相互访问和共享，限制跨源请求。

同源又是什么呢？

所谓同源就是两个URL如果协议，主机（即IP），端口都相同，那么就称两个URL同源。

• 协议：协议是定义了数据如何在计算机内和之间进行交换的规则的系统，例如 HTTP、HTTPS。
• 主机：是已连接到一个计算机网络的一台电子计算机或其他设备。网络主机可以向网络上的用户或其他节点提供信息资源、服务和应用。使用 TCP/IP 协议族参与网络的计算机也可称为 IP 主机。
• 端口：主机是计算机到计算机之间的通信，那么端口就是进程到进程之间的通信。

通过下表让我们来看看与 http://www.cab5.com:8090/user/address 同源的是哪些不同源的是哪些，如下：

默认情况下浏览器是不允许跨域访问的，只允许同源策略。

但是，我们在很多实际的场景下还是需要进行跨域访问。这里就不得不说 CORS 了。

CORS是什么？

CORS，全称 Cross-Origin Resource Sharing，中文翻译「跨源资源共享」。

TA 是一个机制，允许在受控的条件下，不同源的网页访问和共享资源。

TA 基本思想是，服务器在响应中增加一个标题头（HTTP头），用来指示哪些源可以访问资源。浏览器在发送真正的请求之前先发送一个「预检请求」（OPTIONS 请求）到服务器，「预检请求」会包含一些额外的头部信息，例如：Origin、Access-Control-Request-Method 等，用来告知服务器实际请求的方法和来源。服务器通过「预检请求」提供的信息判断是否允许实际的跨域请求，预检请求通过后，服务器会将允许的请求源、方法、标头等信息返回给浏览器。此时，浏览器才会发送真正的请求。

所有的 CORS 请求都会触发「预检请求」吗？

答案是否定的。那些不会触发 CORS 「预检请求」的请求，被称为「简单请求」，请求只要满足以下几个条件，就会被视为简单请求：

1. HTTP 方法限制：只能使用 GET、HEAD、POST 这三种 HTTP 方法之一。如果请求使用了其他 HTTP 方法，就不再被视为简单请求。
2. 自定义标头限制：请求的 HTTP 标头只能是以下几种常见的标头：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type（仅限于 application/x-www-form-urlencoded、multipart/form-data、text/plain）。HTML 头部 header field 字段：DPR、Download、Save-Data、Viewport-Width、WIdth。如果请求使用了其他标头，同样不再被视为简单请求。
3. 不使用自定义请求标头：请求不能包含用户自定义的标头。
4. 请求中没有使用 ReadableStream 对象。
5. 请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问

回到我们标题中的那个问题：“为什么有些POST请求会触发两次HTTP请求？”

通过上边我们知道，POST 是一个简单的请求，按说浏览器不会发送一次「预检请求」的，但是，如果该 POST 请求中有自定义的标题头，那就不是简单请求了，所以，浏览器会先发送一次「预检请求」，「预检请求」通过后，再发送真正的请求。