前端跨域配置 axios.defaults.withCredentials = true； 无效的原因

背景

前后端分离项目, 后端返回cookie的方式如下:

在前端配置了 withCredentials = true :

axios.defaults.withCredentials = true;

但是cookie信息不能被浏览器保存下来. 虽然登陆接口返回了200, 但是登录实际上是无效的.

这时候登陆接口的一些信息:

原因

网上的文章提到:

如果要发送Cookie，Access-Control-Allow-Origin 就不能设为星号，必须指定明确的、与请求网页一致的域名。

再看上面的响应头截图, 发现 Access-Control-Allow-Origin 是有一个地址的, 意思是允许在这个域名下保存cookie信息.

而这个地址是获取自请求头里的origin的 :

这里 host, origin 和 referer 有什么区别呢?

名称	含义
host	表示当前请求要被发送的目的地，说白了就是当前请求目标资源的host，仅包括域名和端口号。在任何类型请求中，request都会包含此header信息。
origin	表示当前请求资源所在页面的协议和域名, 这个参数一般只存在于CORS跨域请求中，普通请求没有这个header
referer	表示当前请求资源所在页面的完整路径：协议+域名+查询参数（注意不包含锚点信息, 所有类型的请求都包含此header

(表格内容摘自 HTTP请求中Host、Origin和Referer的区别)

而发送请求的时候, 请求的域名并不是 localhost, 所以cookie信息不能被浏览器保存下来. 因此, 需要配置一个代理来使request url是localhost.

配置

在vue.config.js里加入代理的配置:
意思就是用 / 来代表目的地址, target 表示目标地址.

        proxy: {
            '/': {
                target: 'http://47.115.203.105:38015/', // 代理地址，这里设置的地址会代替axios中设置的baseURL
                changeOrigin: true, // 如果接口跨域，需要进行这个参数配置
                ws: true,
                pathRewrite: {
                    '^/': ''
                }
            },

        }

axios:

请求信息:

这时候cookie已经可以被浏览器正常保存了: