jQuery ajax 302跨域

1、ajax 302

---

ajax用于异步获取服务器数据，可是某天有这么一个使用场景：

> 基于安全考虑，登陆的用户的信息失效时，系统的全部ajax接口都由服务器直接重定向到系统的登陆页面，此时登陆页面与系统属于同一个域；

因而否，使用ajaxComplete的方法为系统全部ajax统一设置请求完成后的回调，判断其http的status code是否为302，相似于下面代码：

$(document).ajaxComplete(function(e, xhr, settings){
    var _location;
    console.log(xhr);
    if(xhr.status === 302){
        _location = xhr.getResponseHeader("Location");
        if(_location) {
            location.assign(_location);
        }
    }
});

//获取数据的接口
$.ajax({
    url: "/api/fetch.html"
}).always(function(ret){
     console.log(ret);
});

但是测试结果显示，ajax的回调在重定向以后死活没有执行，直至获取重定向后的请求才会执行ajax的回调，也就是说重定向后的内容做为ajax的接口内容来响应。此时能够看到浏览器控制台输出的ret内容不是json字符串，实际上为系统重定向到登陆页面的html字符串。
***

为何会出现这样的结果呢？

在stackoverflow上能够找到讨论的答案：

> You can't handle redirects with XHR callbacks because the browser takes care of them automatically. You will only get back what at the redirected location.

也就是说，重定向是由浏览器自动透明的完成的。因此服务器将302响应发给浏览器时，浏览器并非直接处理ajax的回调，而是先执行302重定向。这就是上面例子中为何获取不到xhr.status为302的值。

一个ajax请求的重定向大体流程是这样的：

ajax --> browser --> server --> 302 --> browser(redirect) --> server --> browser --> ajax callback

注意，上面ajax获取不到xhr的status是有一个前提：即，服务器为response设置了*Location* header。

由于，浏览器在发现Location的header时就会自动跳转到Location所指定的URL地址，相似于用js来进行重定向；不过这个重定向只有浏览器知道。

因此，在ajax接口返回302时，而没有设置Location的header时，这个xhr的status值仍是能获取到的，下图是在浏览器控制台测试的结果：

能够看到服务器给response的header添加了Location1的header，浏览器并不认识，因此不会重定向，此时或能够获取xhr的status为302

2、ajax 302跨域

---

随着公司业务的发展新的状况出现了，公司要将登陆认证统一到某台公共的服务器上，这时，失效的用户在ajax获取数据时状态失效而被重定向到登陆页面；因为当前系统与登陆页面不一样域，而XHR不容许跨域访问数据，因此ajax的302也存在跨域问题。（不像页面之间重定向不存在这个问题，你能够访问当前系统的某个页面，服务能够重定向到www.baidu.com而不会有跨域问题）。

这时，因为存在跨域，浏览器不会进行重定向；可是可否经过上面的代码来用JavaScript进行重定向呢？

抱歉，一样不能够；这时经过ajaxComplete方法获取到的xhr的status值，发现其值为0，Location的header为null；因此这种办法行不通。更可取的方法能够是这样：

首先不要在服务器端进行重定向；而后经过接口的形式或者在response添加一个自定义header来区分重定向信息；最后由JavaScript来进行重定向

3、xhr status为0的问题

---

翻看W3C文档，发现xhr的status值由如下三个步骤来决定：

The status attribute must return the result of running these steps:

  1.  If the state is UNSENT or OPENED, return 0.

  2.  If the error flag is set, return 0.

  3.  Return the HTTP status code.

第二条的error flag：The error flag indicates some type of network error or fetch termination. It is initially unset.

经过上面得知：

在调用xhr的open方法尚未调用send方法，或者xhr出错了(如跨域就会发生网络错误)都会致使xhr state为0的状况

最多见的两种xhr status为0的状况：

• ajax发送后尚未获得响应前当即刷新浏览器，这时ajax就会被浏览器给丢弃了，会返回status code为0；这主要发生在form表单的提交用ajax来提交，而没有阻止表单提交的默认行为，致使页面刷新，这时ajax发出了，但页面刷新; 其实ajax能获得xhr的status只不过值为0；

• xhr跨域，包括异步请求跨域和302跨域的状况，这时会出现xhr status为0的状况

参考文献

• How to manage a redirect request after a jQuery Ajax call
• ajax与302响应
• jQuery Ajax - Status Code 0?