【老生常谈👴】重温CORS策略

这次依旧是【老生常谈👴】系列，具体想聊聊 CORS，我相信很多朋友已经对这个技术很熟悉了，之所以想聊，是因为最近我在重温时，又发现了自己之前不太明白或者没注意的点，所以准备分享给你，希望你能有收获哦~

什么是CORS

老规矩，在聊一门技术之前，首先得知道它是啥，用来干嘛的，所以这一节先来讲清楚这个事情

CORS是一个 W3C标准，全称是”跨域资源共享”（Cross-origin resource sharing），主要用于解决浏览器对于异步请求的 同源限制，从而实现跨站异步请求

异步请求的分类

对于跨站的异步请求，其实是分为两类

• 简单请求
• 非简单请求

对于这两种请求，CORS有不同的处理，在讲解具体如何处理之前，咱们先把这两种请求的概念梳理下

简单请求

所谓简单请求，其实就是同时满足以下两大条件

1. 请求方法是以下三种方法之一：

   • HEAD
   • GET
   • POST

2. HTTP的头信息不超出以下几种字段：

   • Accept
   • Accept-Language
   • Content-Language
   • Last-Event-ID
   • Content-Type：只限于三个值 application/x-www-form-urlencoded、multipart/form-data、text/plain

非简单请求

不是简单请求的请求，就是非简单请求

这不是废话吗 = =

接下来讲讲对于不同类型的请求，CORS是如何处理的

不同请求的不同处理

简单请求

对于简单请求，浏览器会 直接 发出请求，唯一做的就是在请求头加一个 origin 字段。对于服务器来说，它会根据origin字段来判断请求源是否合法，如果不合法就返回一个不带跨域头的响应，浏览器收到后就会知道本次请求被拒绝掉了，如果合法，服务器会在响应头中加上下列跨域头

• Access-Control-Allow-Origin：请求源的白名单
• Access-Control-Allow-Credentials：表明请求是否可以带上cookie，需要注意如果要带cookie，Access-Control-Allow-Origin不能设置为 *
• Access-Control-Expose-Headers：表明可以被客户端抓取的响应头

非简单请求

对于非简单请求，浏览器会先发一个 嗅探请求，用来求证跨域请求是否合法，只有通过后才能在之后发送异步请求，这个嗅探请求就是 options 请求，它会携带如下响应头

• Access-Control-Request-Method：表明请求会用到的方法
• Access-Control-Request-Headers：表明请求会带上的额外响应头

服务器在收到请求之后，如果未通过，就会返回不带跨域头的响应，表明请求不合法，如果通过，则会返回带有如下响应头的响应

• Access-Control-Allow-Origin：同简单请求
• Access-Control-Allow-Methods：服务器允许的请求方法
• Access-Control-Allow-Headers：服务器允许的请求头
• Access-Control-Allow-Credentials：同简单请求
• Access-Control-Max-Age：用来指定本次预检请求的有效期，单位为秒

在预检请求通过后，之后的请求就跟简单请求一样了

结语

CORS现在已经是跨域的主流解决方案，因此一定要掌握，好啦，就写到这啦，over！