一次ajax请求canceled的问题笔记

最近有一个项目,需要用到微信授权登录+前后端分离。前端调试的时候说获取不到用户信息。

整个过程是这样的:

1.活动页面发起微信授权登录,授权之后跳转回活动页面加上token参数
2.前端通过token参数请求用户信息接口获取用户信息
3.其他逻辑操作(跟我无关..)

现在的问题是 第1步获取到token之后,前端获取不到用户信息。导致活动页面异常。

跨域

首先想到的当然是跨域问题,第一步的跳转不存在跨域问题,但第二步通过token请求用户信息用到了AJAX获取。

于是查看代码

1
header('Access-Control-Allow-Origin:*');

emmm,并不是。

JQ版本库问题

之前活动用的都是1.7.2的库,但是这次前端用了1.10.2的库。莫非是因为高版本库的一些特殊原因导致ajax异常?
尝试把JQ换回1.7.2,依旧获取不到用户信息。

查阅资料

百度了下大多都是说跨域的问题,但是无意间刷到一篇文章一次偶然的ajax请求导致status为canceled的原因

其中的项目问题与我遇到的并不是同一个问题,但是结尾的一句话引起了我的注意

在URL变更后,会对当前正在执行的ajax进求进行中止操作。中止后该请求的状态码将为canceled

因为前端的js代码为

1
2
user.save() //保存用户信息函数,此处用到了ajax
location.href = xxx //保存完了之后跳转到活动页面

在ajax不设置async同步状态时默认采用的是异步请求。那么ajax请求挂起之后,js将继续执行location.href做URL跳转。此时就会导致请求canceled。

解决方案

在user.save()的ajax请求中,手动设置async:false把请求设为同步。
这样在获取到用户信息之后才能执行跳转。


评论区