背景
前后端分离项目, 后端返回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已经可以被浏览器正常保存了: