项目场景:
最近使用Vue开发一个新的项目,因为服务器还没到,调取后端本地接口,因为请求接口的时候没有跨域,就没开反向代理。后面就被一个很基础的东西踩了坑,就是 cookie
的一些知识,记录一下,加深一下印象。
问题描述:
联调过程中,发现调用登录接口之后,再去调其他接口,就会报登录状态失效,之前做了好久小程序的项目,突然遇到这种有点懵逼。原因分析:
首先,出现这个问题,问了下后端,后端说是Cookie没有传给他。然后我们来确认下Cookie的定义和作用是什么?HTTP 协议中的 Cookie 它包括 Web Cookie 和浏览器 Cookie,它是服务器发送到 Web 浏览器的一小块数据。服务器发送到浏览器的 Cookie,浏览器会进行存储,并与下一个请求一起发送到服务器。通常,它用于判断两个请求是否来自于同一个浏览器,例如用户保持登录状态。
当接收到客户端发出的 HTTP 请求时,服务器可以发送带有响应的 Set-Cookie 标头,Cookie 通常由浏览器存储,然后将 Cookie 与 HTTP 标头一同向服务器发出请求。
看到这里,我就去看了下,当我调用登录接口成功的时候,后端是返回了Set-Cookie 的,但是发现浏览器没有去设置。看到这里,就知道Set-Cookie 浏览器没有生效。Cookie 基于安全方面的考虑,在浏览器中无法获取跨域的 Cookie 。
解决方案:
在Vue项目里根目录vue.config.js设置一下反向代理module.exports = {
devServer: {
// 设置代理
proxy: {
"/api": {
target: "http://127.0.0.1:8081/", // 域名
ws: true, // 是否启用websockets
changOrigin: true, //开启代理:在本地会创建一个虚拟服务端,然后发送请求的数据,并同时接收请求的数据,
//这样服务端和服务端进行数据的交互就不会有跨域问题
pathRequiresRewrite: {
"^/api": "/"
}
}
}
}
}
请求的时候
// '/api'等于'http://127.0.0.1:8081/api'
// 此时请求地址为'http://127.0.0.1:8081/api/picture?method=upload'
get('/api/picture?method=upload')
解决完成!开心。
个人水平有限,有问题欢迎大家留言指导,仅供学习和参考。
学海无涯!努力二字,共勉!