跨域-CORS

跨域-CORS（跟ajax请求差不多）

原理：向响应头header中注入Access-Control-Allow-Origin，这样浏览器检测到header中的Access-Control-Allow-Origin，则就可以跨域操作了。CORS跨域分为简单请求和复杂请求。

跨域造成的CSRF攻击解决方案：
防止CSRF攻击，浏览器的Cookie新增加了一个SameSite属性
sameSite有三个值：
strict、Lax（设置前两个，基本杜绝了CSRF的攻击）、none
strict：最严格，完全禁止第三方Cookie，跨站时，任何情况都不会发送Cookie，只有当前网页的URL与请求目标一直，才会才上Cookie
Lax：大多数情况不发送第三方Cookie，但是导航到目标网址的Get请求除外。
None：关闭sameSite属性，将其设置为None，必须同时设置Secure属性（cookie只能通过https协议发送），否则无效。

---

简单请求：

在头信息中加origin字段
服务器返回：Access-Control-Allow-Origin

复杂请求：

发送预检请求，使用OPTION请求，用于询问要被跨域访问的服务器是否允许当前域名下的页面发送跨域的请求

• 发送OPTION请求（携带以下请求头）
  origin
  Access-Control-Request-Header
  Access-Control-Request-Methods
• 服务器收到请求后，检查origin、Access-Control-Request-Header、Access-Control-Request-Methods，确认允许跨域做出回应：
  Access-Control-Allow-Origin
  Access-Control-Allow-Methods
  Access-Control-Allow-Headers
• 然后发起第二次正常请求
  origin
• 服务器返回：
  Access-Control-Allow-Origin

发生预检请求的条件：

• 1.请求方法不是GET、POST、HEAD其中任意一个
• 2.不是下面定义对CORS安全的首部字段（请求头信息）集合，而是是集合之外的其他首部字段。
  Accept、Accept-Language、Content-Language、Content-Type、DPR、Downlink、Save-Data、Viewport-Width、Width。
• 3.Content-Type的值不是text/plain、multipart/form-data、application/x-www-form-urlencoded中任意一个值
• ps:content-type常用四个取值:text/xml、multipart/form-data、application/x-www-form-urlencoded、application/json

相关字段作用：

请求头：
origin ：发起跨域请求的源域名
Access-Control-Request-Header ：用于在预检请求时，告知服务器要发起的跨域请求中会携带的请求头信息
Access-Control-Request-Methods ：用于表明跨域请求使用的HTTP方法

响应头：
Access-Control-Allow-Origin：携带服务器验证后允许的跨域请求的域名。
Access-Control-Allow-Methods ：用于告知浏览器实际发送跨域请求时，可以支持的请求方法
Access-Control-Allow-Headers ：用于告知浏览器实际发送跨域请求时，可以支持的请求头
Access-Control-Allow-Credentials：表示是否允许发送Cookie
Access-Control-Max-Age：用来指定本次预检请求的有效期
Access-Control-Expose-Headers：用于允许返回给跨域请求的响应头列表，在列表中的响应头的内容，才可以被浏览器访问。