Axios之请求如何携带cookie用于session认证

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跨域成功解决
下面是测试结果


过期也是一致的，这里不做展示了

如果本篇文章对你有帮助给博主点个小小的关注