由nginx自动补‘/’造成的“灵异事件”反思
2019-04-23 本文已影响0人
470d98b91bd3
项目上uat测试后,出现了一个“灵异事件”,且听我娓娓道来
测试的同事突然给我提了一个bug,说我页面在切换页数的时候,会把部分已经填写了但没保存的数据清空。我让测试的小伙伴重现了几次,我发现正常情况下是不会出问题的,但是他只要从另一个页面一进入该页面就立即F5刷新,再输入一些表单信息时,切换页数,表单信息就会自动重置。
该死的是,我竟没办法在我本地上去重现这个问题!
于是我绞尽脑汁在uat环境上看,却惊奇的发现,在我切换页数“灵异事件”发生的时候,会去请求一个接口,而这个接口只会在保存的时候跟页面初始化的时候调用到
于是我试探得改了一下代码,发现切换页面时竟然整个页面重新实例化了一次。我一想这不正常,于是刷新的时候看到了我从A页面进入的时候,url上是/puzzle/work?page=1
,而在我刷新后url变成了puzzle/work/?page=1
,在我切换到第二页的时候,url会被强制变回/puzzle/work?page=2
知道真相的我气得直跺脚,千算万算没算到问题竟然出现在这个斜杠上。准确来说不能把锅算在nginx头上
image.png原因是nginx 这个配置,不过这个是单页应用比较常见的作法了, /puzzle/work 这个文件本来是没有的,所以就会尝试这个/puzzle/work/
,访问这个目录的时候,就会访问到 /puzzle/work/index.html
所以我只能在前端代码中去兼容这个做法。做法很简单,就是修改切换页码的逻辑
// 原来的代码
const query = Object.assign({}, this.$route.query)
query.page = this.currentPage
const route = Object.assign({}, this.$route, {
query
})
this.$router.replace(route)
正确的代码:
// 正确的代码
const query = Object.assign({}, this.$route.query)
query.page = this.currentPage
this.$router.replace({
path: this.$route.path,
query
})
另外,如果用if语句或者做其他判断的时候需要对url上的参数做校验,建议大家使用$router.name
而不是$router.path
,否则“灵异事件”会找上你!