Axios发送跨域请求时,默认不携带cookie的问题解决示例。

问题发现:

在使用vue开发学子商城项目时,发现登录页面即使登录成功了,也无法将正确的登录状态信息传递回主页。


在这里插入图片描述


如图:登陆成功之后,登录状态码为1,且通过cookie保存下来,跳转到首页后通过axios请求获取cookie中保存的登录状态码。但是此时获取到的状态码却不正确,导致错误的原因是: axios请求默认不携带cookie


解决方案:

方案一、修改axios中的cookie配置。
通过查阅axios手册我们可以发现,axios的请求配置默认是不携带cookie信息的。


在这里插入图片描述


所以我回到代码发送axios请求的位置,去设置 withCredentials的值为true,注意这里的参数是以对象的形式设置。在login页面和header页面的axios请求中都需要设置。
header中的设置。
header组件中的设置。


login中的设置
login组件中的设置,注意这里是post请求,withCredentials对象作为第三个参数设置。


一切都设置完成之后,启动服务器,查看页面效果,完美运行!
咳咳,你会发现居然报错了。
在这里插入图片描述
检查错误信息,原来是因为启用withCredentials之后,服务器端的响应头信息中的Access-Control-Allow-Origin不能设置为“ * ”号。好吧,既然不能用*,那就干脆写成项目运行时的ip地址和和端口号。这里设置为http://127.0.0.1:8080


在这里插入图片描述
在服务器端路由中设置响应头信息。


确保一切都修改好之后,再运行服务器,查看设置是否成功。
终于修改好了!
你会发现还是在报错,为什么呢?
还是来查看报错原因。


在这里插入图片描述

用蓝色箭头标识出来了错误原因,是因为设置了withCredentials为true之后,响应头消息中的’Access-Control-Allow-Credentials’也应该设置为true。
找到了原因,继续回到服务器端路由中进行设置。


在这里插入图片描述


再运行服务器,查看代码效果!
这回终于修改好了!
在这里插入图片描述

可以看到,通过cookie成功的获取到了登录状态信息!说明axios的cookie携带设置成功!

总结一下,如果想使用axios的withCredentials来传递cookie,需要以下步骤:
1.在axios请求的参数中,写入对象属性withCredentials:true
2.服务器端响应头消息中的’Access-Control-Allow-Origin’不能设置为 ’ * ’ 号,需改成具体的id地址。
3.服务器端响应头消息中必须设置 ‘Access-Control-Allow-Credentials’:‘true’。


方案二:通过定义window.uid全局变量来解决。

此方法原理是当 islogin登录成功时,将uid返回到客户端。然后客户端将uid保存到window.uid中,这样另一个组件就可以直接从window.uid中读取用户id。当发送axios请求时,再讲用户id作为参数发送到服务器中。【不建议这种做法,此为临时解决方案。需要更改后台很多数据,而且一次只能存一个变量。】

先不讲这个,有时间来填坑。

方案三:通过vueX中的store状态管理来解决。【推荐】

猜你喜欢

转载自blog.csdn.net/SilenceJude/article/details/84561063