前后端分离中的 cookie 跨域问题

背景

毕设项目的前后端分离改造，重写整个前端和后端接口

场景

1. 获取登录验证码接口（后端生成）
2. 登录接口（需要输入验证码）

1接口在返回前端 验证码图片 的同时，向响应头中写入了一个captchaOwner的 cookie，用于 验证码 与 验证码请求者 的匹配（服务器端则是被存在了redis中）

2接口在校验账户密码的同时，会接收这个captchaOwner cookie，并校验 与 redis 中存储的数据是否匹配 是否匹配

问题

获取不到这个 cookie

解决

经查阅资料，意识到这个 cookie，是会被响应后浏览器自动设置的，不需要额外的操作
但是仍然会存在 跨域问题，因为这个 cookie 是被设置在服务器域名（端口）下的
CORS请求默认不发送Cookie和HTTP认证信息。如果要把Cookie发到服务器，一方面要服务器同意，指定Access-Control-Allow-Credentials字段

response.setHeader("Access-Control-Allow-Credentials", "true");

//需要注意的是，如果要发送Cookie，Access-Control-Allow-Origin就不能设为星号，必须指定明确的、与请求网页一致的域名
response.setHeader("Access-Control-Allow-Origin", "http://localhost:3000");

同时前端 ajax 请求设置

        axios.get('http://localhost:8079/community/captcha', {
            responseType: "blob",
            withCredentials: true //这里

同时，Cookie依然遵循同源政策，只有用服务器域名设置的Cookie才会上传，其他域名的Cookie并不会上传，且（跨源）原网页代码中的document.cookie也无法读取服务器域名下的Cookie。