Axios之请求如何携带cookie用于session认证
vue3 vue2 axios跨域解决方案以及请求携带cookie
Axios如何解决跨域
vue3中报错
Access to XMLHttpRequest at ‘http://127.0.0.1:3001/api/login’ from origin ‘http://127.0.0.1:8080’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: The value of the ‘Access-Control-Allow-Origin’ header in the response must not be the wildcard ‘*’ when the request’s credentials mode is ‘include’. The credentials mode of requests initiated by the XMLHttpRequest is controlled by the withCredentials attribute.
如何解决呢?
项目中使用cookie是用于记录图片验证的时间,后端是express框架基于svg-captcha中间生成的验证码,将生成的验证码储存到redis中,设置好session的有效时间,到session过期redis会自动清楚对应的键值,为后端只需要判断前端传送过来的session是否有效就可以判断此验证码是否可用
接下来如何让axios携带cookie向后端发送请求呢?
前端在axios的封装中加入这样的一端参数
axios.defaults.withCredentials = true;//携带cookie
这样加入保存之后,后端也要设置的不然会报错,报跨域的错误,如下
我的后端是用nodejs的express框架写的,我们引入中间件cors用于来解决跨域
下面是cors的参数设置
app.use(cors({
credentials: true,
origin: 'http://127.0.0.1:8080', // web前端服务器地址
}));//解决跨域
里面的origin通俗的讲就是将请求重定向,变成同域下的可以访问的,也可以说是加入白名单,看你的个人理解
这样配置完事,cookie跨域成功解决
下面是测试结果
过期也是一致的,这里不做展示了
如果本篇文章对你有帮助给博主点个小小的关注
更多推荐
所有评论(0)