🌐 关于 CORS 中的预检请求笔记

背景

在一次POST请求调试过程中，发现连续发了两次请求，数据库中只创建了一条记录。

预检请求.png

查看 OPTION 请求，发现没有附带请求数据，响应体也为空。

Q1：OPTION 预检请求什么作用？

OPTION请求用于获取目的资源所支持的通信选项。

检测服务器所支持的请求方法
CORS中的预检请求
CORS规范要求，对那些可能对服务器数据产生副作用的 HTTP 请求方法（特别是 GET 以外的 HTTP 请求，或者搭配某些 MIME 类型的 POST 请求），浏览器必须首先使用 OPTIONS 方法发起一个预检请求（preflight request），从而获知服务端是否允许该跨域请求。服务器确认允许之后，才发起实际的 HTTP 请求。在预检请求的返回中，服务器端也可以通知客户端，是否需要携带身份凭证（包括 Cookies 和 HTTP 认证相关数据）

image.png

Q2：什么场景会触发CORS的预检请求？

在CORS机制中，客户端（浏览器）将请求分为两种：

简单请求（需同时满足以下条件）

请求方法是以下三种之一：GET、HEAD、POST
HTTP的头信息不超出以下几种字段：Accept、Accept-Language、Content-Language、Last-Event-ID、Content-Type
Content-Type的值仅限于以下三种：text\plain、multipart/form-data、application/x-www-form-urlencoded

非简单请求（凡不同时满足上面两个条件，就属于非简单请求）
会触发浏览器发生预检请求，这是浏览器的行为。“预检请求”的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。
上述代码使用"Content-Type": "application/json; charset=utf-8"因此是一个非简单请求，触发了预检请求。
如果在服务端将允许跨域的请求头去除，同时在服务器端代码相关router上断点发现仅接收到OPTION请求进入，并没有接收到实际请求。

image.png

如果类似浏览器这种，包含 CORS 机制的客户端发送的请求，每次都要经过一个复杂逻辑才能知道自己是否跨域，服务器的压力和用户体验是不理想的，那么预检请求就孕育而生：发送实际请求前，先发送预检请求询问服务器是否允许跨域，不允许就不发送实际请求，服务器只需要对预检请求进行跨域处理。
这样来看，在 CORS 机制中，发送预检请求是一种保护机制，保护资源不被未授权的请求修改。和授权服务很像，预检请求通过了，浏览器后续对同一服务的请求，不需要做跨域询问，服务端不想支持跨域访问，啥也不用做。

CORS

Cross-Origin Rescource Sharing，跨域资源共享，是W3C推荐使用的一种跨域的访问验证的机制，它由一系列传输的HTTP头组成，这些HTTP头决定浏览器是否阻止前端JavaScript代码获取跨域请求的响应。
这种机制让Web应用服务器能支持跨站访问控制，使跨站数据传输更加安全，减轻跨域HTTP请求的风险。CORS验证机制需要客户端和服务端协同处理。

同源策略

出于安全考虑（CSRF（Cross-site request forgery）跨站请求伪造），浏览器限制从脚本中发起的跨域HTTP请求。默认的安全限制为同源策略，即JavaScript或Cookie只能访问同域下的内容。例如：XMLHttpRequest和Fetch遵循同源策略。因此，使用XMLHttpRequest和Fetch API 的Web应用程序只能将HTTP请求发送到其自己的域。
是由 Netscape 提出的一个著名的安全策略，现在所有支持 JavaScript 的浏览器都会使用这个策略。控制两个不同源之间的交互，主要分为三类：

通常允许跨域写入：链接、重定向、表单提交
通常允许跨域嵌入：<script>、<link.../>、<img/>、<video>、<embed> <iframe>
通常允许跨域读取：读取嵌入的图像尺寸、嵌入脚本/资源的可用性

同源策略限制以下几种行为：

Cookie、LocalStorage 和 IndexDB 无法读取
DOM和JS对象无法获得
AJAX 请求不能发送

同源

如果两个URL的协议protocol、端口prot、域名host都相同的话，则这两个URL是同源的。
⚠️ Internet Explorer 的同源策略没有将端口号纳入到同源策略的检查中。

Q3：原生的Form表单提交不会出现跨域的？

表单提交不是从脚本发起的请求，所以无需遵循同源策略。
form 表单提交后，会自动跳转页面到 action 所指向的 URL 来获取结果，最后变成同域，在没有 AJAX 技术的时候，我们发 POST 一般会提交到当前 URL，后端响应 POST 请求，处理之后，又将当前页面返回浏览器重新渲染，这也是每次提交表单会刷新页面的原因。讨论

CORS的作用

为了改善网络应用程序，开发人员要求浏览器供应商允许跨域请求。跨域请求主要用于：

调用XMLHttpRequest或fetchAPI通过跨站点方式访问资源
网络字体，例如Bootstrap（通过CSS使用@font-face 跨域调用字体）
通过canvas标签，绘制图表和视频。

跨域请求流程

简单请求流程：

简单跨域请求流程.png

非简单请求流程：
浏览器先询问服务器，当前网页所在的域名是否在服务器的许可名单之中，以及可以使用哪些HTTP动词和头信息字段。只有得到肯定答复，浏览器才会发出正式的XMLHttpRequest请求，否则就报错。

Q4：CORS VS JSONP

在出现CORS标准之前，我们只能通过JSONP的形式去向跨源服务器发送XMLHttpRequest请求，请求方和接收方都需要做处理，而且请求的方式仅仅局限于GET。

CORS与JSONP的使用目的相同，但是比JSONP更强大。
JSONP只支持GET请求，CORS支持所有类型的HTTP请求。
JSONP的优势在于支持老式浏览器，以及可以向不支持CORS的网站请求数据。

JSONP原理
JSONP 的实现需要客户端和服务端配合。客户端在 HTML 中动态生成 script 标签，在 “src” 中引入请求的 URL + 回调函数，这样请求服务器返回的数据会交由回调函数处理，这样就实现了跨域读请求；服务端在接收到客户端请求后，首先取得客户端要回调的函数名，再生成 JavaScript 代码段返回给浏览器，浏览器在获取到返回结果后直接调用回调函数完成任务。
JSONP 的一个要点就是允许用户传递一个callback参数给服务端，然后服务端返回数据时会将这个callback参数作为函数名来包裹住JSON数据，这样客户端就可以随意定制自己的函数来自动处理返回数据了。

浏览器脚本——定义：定义 callback，callback内是读取数据的逻辑
服务端——调用：输出对 callback 的调用，把目标数据作为入参传给 callback
jsonp只能用于GET的原因

CORS
CORS是一个W3C标准，全称“跨域资源共享”。CORS 实现起来非常方便，只需要增加一些 HTTP 头，让服务器能声明允许的访问来源。
对于开发者来说，CORS通信与同源的通信没有差别，至少代码上是一样的。浏览器一旦发现AJAX请求跨域，就会自动添加一些附加的头信息、追加必要的请求，但用户不会有感觉。

Q5： XMLHttpRequest vs Fetch

XMLHttpRequest一直是Web开发者最熟知的与服务器交互的助手。当我们谈及Ajax技术的时候，通常意思就是基于XMLHttpRequest的Ajax，它是一种能够有效改进页面通信的技术。
Fetch API是W3C的正式标准，是XMLHttpRequest的最新替代技术。同复杂的XMLHttpRequest的API相比，Fetch使用了Promise，这让它使用起来更加简洁，从而避免陷入”回调地狱”。

浏览器的支持程度.png

使用XMLHttpRequest发送POST请求
XMLHttpRequest.readyState 属性返回一个 XMLHttpRequest 代理当前所处的状态。有0～4共5种状态。

let xhr = new XMLHttpRequest(); // 初始化XMLHttpRequest对象
xhr.open("POST", "http://localhost:8001/addShare", true); // 以POST方式发送请求，并打开链接
xhr.onreadystatechange = function(){ // 设置处理响应的回调
  if(xhr.readyState == XMLHttpRequest.DONE && xhr.status == 200){
    console.log(xhr.responseText); //{"desc":"update ok"}
  }
}
xhr.setRequestHeader("Content-Type", "application/json; charset=utf-8"); // 设置POST请求头
xhr.send(JSON.stringify({
  fileName: "分享主题-分享人-20200602",
  src: "www.baidu.com",
}))

XMLHttpRequest发送POST.png

使用Fetch API发送POST请求

let header = new Headers();
header.append("Content-Type", "application/json; charset=utf-8");
let request = new Request("http://localhost:8001/addShare");
fetch(request, {
  method: "POST",
  headers: header,
  mode: 'cors',
  body: JSON.stringify({
    fileName: "分享主题-分享人-20200602",
    src: "www.baidu.com",
  })
}).then(function(response){
  return response.json();
}).then(function(response){
  console.log(response) //{desc: "update ok"}
})

Fetch发送POST.png