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

2020-06-01  本文已影响0人  BubbleM

背景

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

预检请求.png

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

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

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

image.png

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

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

  1. 简单请求（需同时满足以下条件）
  1. 非简单请求（凡不同时满足上面两个条件，就属于非简单请求）
    会触发浏览器发生预检请求，这是浏览器的行为。“预检请求”的使用，可以避免跨域请求对服务器的用户数据产生未预期的影响。
    上述代码使用"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 的浏览器都会使用这个策略。控制两个不同源之间的交互，主要分为三类：

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

同源

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

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

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

CORS的作用

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

跨域请求流程

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

Q4：CORS VS JSONP

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

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

优秀笔记推荐

9种常见的前端跨域解决方案
深入浅出Fetch API
ajax和axios、fetch的区别
option请求优化

上一篇下一篇

猜你喜欢

热点阅读