同源策略
什么是同源策略
同源策略（Same-Origin Policy）是一种Web浏览器安全策略，它限制了一个网页文档或脚本如何与来自不同源（源指协议、域名和端口的组合）的资源进行交互。同源策略的目的是为了保护用户的隐私和安全，防止恶意网站通过跨域请求来访问或篡改用户的敏感数据。
同源策略的主要限制包括：
Cookie、LocalStorage和IndexDB限制： 同源策略禁止在不同源的页面间访问对方的Cookie、LocalStorage和IndexDB数据。这意味着一个网页只能访问自己域名下的存储数据。
DOM限制： JavaScript在不同源的页面中不能访问或修改对方的DOM结构。这意味着不能通过JavaScript获取跨域页面的HTML内容。
AJAX请求限制： 使用XMLHttpRequest、Fetch等方式发起的跨域AJAX请求受到同源策略的限制，但可以通过跨域资源共享（CORS）来解除这种限制。
Frame和iFrame限制： 同源策略限制了一个网页是否可以在一个不同源的Frame或iFrame中加载。有些网站使用X-Frame-Options标头来进一步限制是否允许被嵌套在其他网站中。
为什么会有同源策略
早期的WEB环境偏向于静态内容展示，浏览器安全并不是首要考虑要素，但是随着浏览器的蓬勃发展和JavaScript技术的崛起，浏览器环境逐渐从静态展示变更到动态交互。当一个产品需要为用户提供更多服务的时候，那么他所需要的用户数据也是正增长的，因此随着浏览器的成熟，用户大量敏感数据也会出现在浏览器上，因此为了保护用户数据，根据浏览器特性推出了同源策略，以此来限制一些破坏攻击和窃取用户数据的行为。
CORS
在认识了同源策略之后，我们再来了解另一种机制。刚刚在说同源策略限制的内容中有一条提到了同源策略会限制AJAX请求，在现代业务场景中，我们不可能完完全全把前后端代码放到同一台机器上去，或者在生产环境，我们也不能避免会出现前后端不运行在同一系统环境的问题，因此前后端通过接口交互时，解决跨域问题显得尤为迫切和重要，而CORS就是用来解决这些问题的。
CORS（Cross-Origin Resource Sharing）： CORS是一种机制，它允许Web服务器决定是否允许浏览器中的JavaScript代码从不同的源（域名、协议或端口）请求和获取资源，如数据或图片。它通常用于跨域AJAX请求，以确保安全地在不同的源之间进行数据交换。CORS是通过在HTTP响应头中添加特定的CORS头（如Access-Control-Allow-Origin）来配置的
请求的类别
简单请求
不会触发 CORS 预检请求。这样的请求为 简单请求，。若请求满足所有下述条件，则该请求可视为 简单请求：
HTTP 方法限制：只能使用 GET、HEAD、POST 这三种 HTTP 方法之一。如果请求使用了其他 HTTP 方法，就不再被视为简单请求。
自定义标头限制：请求的 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。如果请求使用了其他标头，同样不再被视为简单请求。
请求中没有使用 ReadableStream 对象。
不使用自定义请求标头：请求不能包含用户自定义的标头。
请求中的任意 XMLHttpRequestUpload 对象均没有注册任何事件监听器；XMLHttpRequestUpload 对象可以使用 XMLHttpRequest.upload 属性访问
预检请求
非简单请求的 CORS 请求，会在正式通信之前，增加一次 HTTP 查询请求，称为 预检请求。
浏览器预检请求（Preflight Request）是跨源资源共享（CORS）机制的一部分，用于确保在进行跨域请求时，服务器能够安全地处理来自不同源（域名、协议、端口）的请求。它是为了增强浏览器的安全性而设计的。
预请求通常是一个HTTP OPTIONS 请求，它包含了一些额外的信息，以告知服务器将要发送的实际请求的细节。这些额外的信息包括：
HTTP方法： 预请求会指定实际请求将使用的HTTP方法（例如，GET、POST、PUT等）。
自定义请求头： 如果实际请求中包含了自定义的请求头（不同于浏览器自动生成的标准请求头），预请求会将这些请求头列出。
身份验证信息： 如果请求需要身份验证，预请求会指定使用的身份验证方法。
CORS头： 预请求中会包含一些特定于CORS的头，例如
Origin头，用于指示请求的源，以及Access-Control-Request-Method头，用于指示实际请求使用的HTTP方法。
总结
因此，当一个POST发送了两次请求时，实际上这是CORS机制中预检请求和实际请求同时发送，所以，可以观察到POST发送了两个请求，不过预检请求的副作用并不大，不会直接影响实际请求。
评论区