前端

ajax 请求数据返回 302 的情况

今天遇到了一个奇葩问题，和同事有一些争论。内容大致是页面通过 ajax 发出请求，结果接口没能返回 json，返回了一个 302 页面，此时页面是否会直接进行跳转。

本来这个问题不难，很明显的，通过 ajax 的请求，不论发生什么都不会跳转走。但是是否会再次自动发送请求呢？

服务端代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
const Koa = require('koa')
const serve = require('koa-static')
var Router = require('koa-router')
const app = new Koa()
var router = new Router()

router.get('/302', (ctx, next) => {
    ctx.status = 302
    ctx.redirect('/r.html')
    next()
})

app.use(router.routes())
   .use(router.allowedMethods())
   .use(serve('public'))

app.listen(3000)

页面代码如下：

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>ajax</title>
</head>

<body>
    <script src="https://cdn.staticfile.org/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://cdn.staticfile.org/axios/0.15.3/axios.min.js"></script>
    <script>
        $.ajax({
            url: 'http://localhost:3000/302',
            dataType: 'json',
            success: function (data, xhr) {
                console.log('success', data, xhr)
            },
            error: function (xhr) {
                console.log('err', xhr)
            }
        })

        // axios.get('http://localhost:3000/302')
    </script>
</body>
</html>

不论使用 jQuery 还是 axios，结果都是一样的。

  1. 页面发出请求，结果是返回了 302 页面。
  2. 如上文，jQuery 由于没办法按照 json 解析，所以进入了 error。如果不是定死 json，那么也可能进入 success 的。
  3. ajax 自动实现了 302，重新请求了新的地址。302 跳转的次数貌似有限制，jQuery 大概是限制 10 次左右，超过就不会在跳转了。axios 好像可以自己配置次数。
  4. 页面也的确没有跳转走。