一、简单请求与复杂请求 跨域问题

什么是简单请求

• 请求方式为GET、HEAD、POST时的请求；
• 认为设置规范集合之内的首部字段，如Accept/Accept-Language/Content-Language/Content-Type/DPR/Downlink/Save-Data/Viewport-Width/Width;
• Content-Type 的值仅限于下列三者之一,即application/x-www-form-urlencoded、multipart/form-data、text/plain；
• 请求中的任意 XMLHttpRequestUpload对象均没有注册任何事件监听器；
• 请求中没有使用 ReadableStream对象。

什么是复杂请求

• 请求方式为PUT/DELETE/CONNECT/OPTIONS/TRACE/PATCH;
• 人为设置了以下集合之外首部字段，即简单请求外的字段;
• Content-Type 的值不属于下列之一，即application/x-www-form-urlencoded、multipart/form-data、text/plain。

简单请求跨域

请求头属性

• Origin Origin和Referer的区别是，Origin包含协议、域名、端口，不包含路径，Referer包含路径

响应头属性

• Accept-Control-Allow-Origin: '*' // 或者指定域名
• Access-Control-Allow-Credentials: 可选，是否允许携带cookie

请求次数

• 1次

复杂请求跨域

请求头属性

• Origin：必须
• Access-Control-Request-Methods: 必须，指定cors可以使用哪些http方法
• Access-Control-Request-Headers: 可选，指定cors可以额外发送的头信息

响应头属性

• Access-Control-Allow-Origin： 必须
• Access-Control-Allow-Methods： 必须
• Access-Control-Allow-Headers: 当请求头有Access-Control-Request-Headers时必须，否则可选
• Access-Control-Allow-Credentials: 可选，是否允许携带cookie
• Access-Control-Max-Age: 可选

请求次数

• 2次，第一次是预检请求OPTIONS。预检请求用于检测是否跨域，如果跨域就不发二次请求了。因为即使不允许跨域，浏览器没有处理响应，请求也是会被服务器处理从而造成影响的

二、跨域时cookie携带问题

无论是简单请求还是复杂请求，跨域时携带cookie都需要Access-Control-Allow-Credentials为true才可以携带cookie信息

除此之外，cookie的携带还被set-cookie所限制，在处理跨域请求cookie携带问题时，这些都是需要综合考虑的

set-cookie的一些限制

secure
对于https, 如果设置了secure=true，那么cookie只能通过https请求发送
并且现在http请求不允许设置secure属性

Domain
可以访问该cookie的域名，默认为origin
如设置了google.com, 那么向谷歌发请求时就能够携带这个cookie
Domain默认包含二级域名，常用于和子域名共享用户信息

Path
指令了哪些路径可以访问cookie， 模糊匹配

SameSite

• null, 即浏览器会在同站、跨站的情况下发送cookie
• Strict， 浏览器只会在同站时发送cookie
• Lax, 同站发送cookie， 跨站时只会在导航到本站时发送cookie(如a.href)，而img.src, script.src都不会发送cookie