LOADING...

加载过慢请开启缓存(浏览器默认开启)

loading

前后端交互时Vue不返回Cookie【踩坑】

2022/9/24 技术

最近在帮学校某个部门开发一款资产管理系统时,前端出现不能返回Cookie的问题。当时琢磨了很久,在网上查阅相关资料后,发现没有在axios加上这行配置:

axios.defaults.withCredentials = true;

然而加上之后问题依旧没有解决。
看了一下F12中的Cookie,也没有对应的字段satoken,然后我自定义了一个cookie,测试之后,仍然没有发送出去。

最后研究了一下请求头和响应头发现,Host是localhost:8080,而请求的url不是localhost(前后端分离,当时后端运行在云服务器上),为跨域请求。因此Chomium没有保存Cookie。

解决方案:
在vue.config.js中配置Proxy:

proxy: {
            '/': {
                target: 'http://[URL:Port]/', // 代理目标,这里的地址会代替axios中设置的baseURL
                changeOrigin: true, // 跨域时要用
                ws: false,
                pathRewrite: {
                    '^/': ''
                }
            },

        }

注意,axios需要配置baseurl:

axios.defaults.baseURL = "/[接口前缀]"

此时,axios的请求url就只用带[接口前缀]之后的信息了。

img_show