第一步 浏览器:
首先,浏览器访问网址的时候会判断跟当前的网页是否是同源(协议-域名-端口),如果判断是不是同源,就会携带Origin头。非同源,会判断是否简单请求,简单请求就会直接发送,非简单请求会先进行一次预检,预检成功才发送真实的请求。判断同源及是否简单请点
非简单请求预检:在HTTP里就是OPTIONS请求方式,不会包含主体,主要将一些凭证授权的辅助信息放在请求头里交给服务器。除了携带cookie,还会携带Access-Control-Request-Method和Access-Control-Request-Headers。有的服务器不支持OPTIONS请求直接返回403或者400,支持OPTIONS的会返回200并携带服务器端设置的Access-Control-Allow-Origin 、Access-Control-Allow-Method和Access-Control-Allow-Headers。
浏览器接受到预检返回后,会先查看Access-Control-Allow-Origin,若是为*(表示任意都可以访问)或者该值与自身的Origin相等时,继续下一步,否则报错。
再看Access-Control-Request-Method,自身所需要的Access-Control-Request-Method是否全部包含在列表里,正确则进行一下步,否则报错。验证Access-Control-Allow-Headers,查看Access-Control-Request-Headers是否全部在列表里,正确则预检成功,否则报错。
若没有Access-Control-Allow-Origin或者其他头,则表示服务器端没有设置,不允许跨域,显示报错。
第二步 服务端:
如果服务端没有设置跨域,则在返回结果的时候,Access-Control-Allow-Origin以及Access-Control-Allow-Credentials还有其他CROS头不会加。
如果是浏览器发送的预检请求,服务端也会先将对应的头发送出去,没有设置的话返回无。在服务端设置Access-Control-Allow-Credentials为true的话,会将cookie放入结果中返回,如果不设置的话没有cookie。Access-Control-Allow-Credentials该值时cookie的起点,表示服务端设置cookie并发送会浏览器。
第三步 浏览器接受结果:
浏览器从服务端接收到结果,去取结果中的Access-Control-Allow-Origin等等,判断是否满足要求,都满足要求则将结果展示,否则报错。
前端设置withCredentials: true表示从服务端保存tookie。不设置默认为false,不保存cookie
能正确使用cookie必须服务器先设置,然后浏览器保存,随后的请求中携带这个保存的cookie。



