本文将要讲什么
什么是cors跨域、细节
cors跨域带cookie的细节
结合 demo（zhiguangphoenix/cors-demo）
前提知识和背景
- 知道什么是跨域，什么是同源策略，跨域的限制等等
- 知道除cors外常见的跨域实现
前段时间在工作中接了一个小的后端服务的需求，做的过程中可能需要接入跨域带cookie的方案，于是深入的了解了一下cors跨域带cookie的细节，之前只是比较粗浅的了解。
cors跨域
先运行项目，通过本地的两个端口来模拟两个不同的域，打开http://127.0.0.1:8080/注意：
- 下图的script.src地址是在向另一个域种cookie，应该设置为本机的IP地址，如果设置为127.0.0.1，无法看到跨域带cookie的效果
- 下图跨域带cookie的ajax请求URL不能再向127.0.0.1发起，因为host一样的话会带上cookie，看不出来效果，所以在fe.html中改为本地IP地址即可.
npm run start:be;npm run start:fe
分别点击跨域简单请求和跨域非简单请求（request中加了header：X-header=notsimple），控制面板network会看到:
跨域简单请求发送了一个请求（GET）：
跨域非简单请求发送了两个请求（OPTIONS和GET）：
看下Wikipedia怎么说：cors跨域（wikipedia）是一种跨域的解决方案，具体来说分为两种，简单请求和非简单请求。
图片来自Wikipedia
图片来自https://www.w3.org/TR/cors/#simple-method
简单请求：请求方法是简单方法且请求头是简单头
- 简单方法：GET、HEAD、POST
- 简单头：
Accept，Accept-Language，Content-Language 或 Content-Type是application/x-www-form-urlencoded，multipart/form-data或text/plain
对于简单请求：只有一次请求
request发一次请求：
Origin=发起请求域的域名
response返回：
Access-Control-Allow-Origin: * // 此时暂时设为*
对于非简单请求：一次preflight请求和一次真正的请求
request发一次preflight请求（OPTIONS）：
Access-Control-Request-Headers: x-header //自定义的头部
Access-Control-Request-Method: GET // 接下来真正请求的method
response返回：
Access-Control-Allow-Headers: x-header
Access-Control-Allow-Methods: GET,HEAD,PUT,PATCH,POST,DELETE
Access-Control-Allow-Origin: *
request发一次真正的请求：
X-header: notsimple
Origin=发起请求域的域名
response返回：
Access-Control-Allow-Origin: *
cors跨域带cookie
点击跨域带cookie会看到控制台报错：
错误提示：请求带有withCredentials=true时，response的Access-Control-Allow-Origin不能为*
代码server.js中修改如下，然后点击跨域带cookie按钮
浏览器控制台报错如下：
错误提示：withCredentials=true的时候response的Access-Control-Allow-Credentials必须为true
代码server.js中做修改如下，然后点击跨域带cookie按钮
这次成功返回了：
总结一下，跨域带cookie细节如下：
ajax request设置withCredentials=true
response设置headers：
Access-Control-Allow-Origin=发起请求的origin
Access-Control-Allow-Credentials: true
后记
前端多了解后端，更好更清晰
欢迎关注我的公众号，前端亚古兽，做前端，不止于做前端。
转播
