今天遇到了一个奇葩问题,和同事有一些争论。内容大致是页面通过 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) } })
</script> </body> </html>
|
不论使用 jQuery 还是 axios,结果都是一样的。
- 页面发出请求,结果是返回了 302 页面。
- 如上文,jQuery 由于没办法按照 json 解析,所以进入了 error。如果不是定死 json,那么也可能进入 success 的。
- ajax 自动实现了 302,重新请求了新的地址。302 跳转的次数貌似有限制,jQuery 大概是限制 10 次左右,超过就不会在跳转了。axios 好像可以自己配置次数。
- 页面也的确没有跳转走。