nginx中location里面的try_files配置导致vue设置history模式下的请求丢失参数

背景描述：

在一次生产环境中，vue使用history模式在访问地址的参数会丢失，地址栏也会变成没有参数的地址，并且请求会发生301重定向。最后，发现vue从history模式改成hash模式可以解决参数丢失。但是产生301是nginx的问题，发现nginx配置的try_files有问题，所以会导致丢参数，try_files的配置是为了适配history模式。而nginx默认支持hash模式，不需要额外的配置，所以nginx默认hash是没有问题。最终，发现更改nginx的try_files也能让history模式的访问地址不丢参数。

复现history模式请求丢参数的情景

vue的模式设置为history：

mode: 'history'

有问题的location：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

访问路径：

http://ip/vuecay/path1/path2?name=lucy

访问截图：

在这里插入图片描述

nginx访问日志：

"GET /vuecay/path1/path2?name=lucy HTTP/1.1" 301 162 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay --args: 
114.254.3.243 - - [12/Jul/2022:15:57:22 +0800] "GET /vuecay/ HTTP/1.1" 200 583 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/index.html --args:- 
"GET /vuecay/js/chunk-vendors.a0183049.js HTTP/1.1" 200 46638 "http://ip/vuecay/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/chunk-vendors.a0183049.js --args:- 
"GET /vuecay/js/app.a38bbab2.js HTTP/1.1" 200 1529 "http://ip/vuecay/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/app.a38bbab2.js --args:- 
114.254.3.243 - - [12/Jul/2022:15:57:22 +0800] "GET /vuecay/js/app.a38bbab2.js.map HTTP/1.1" 200 19888 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/app.a38bbab2.js.map --args:- 
"GET /vuecay/js/chunk-vendors.a0183049.js.map HTTP/1.1" 200 677730 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/chunk-vendors.a0183049.js.map --args:-

可以看到地址栏发生改变，参数丢失，第一次请求会发生301重定向，第二次请求地址发生改变，页面也没获取到参数。

修改nginx配置解决参数丢失

上面的location的try_files的配置会导致history模式下的请求参数丢失：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

改用这个location的try_files的配置就不会参数就丢失了。

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html。
  #vuecay后面有‘/index.html’,等同于“/”，vuecay后面有“/”会自动在“/”后面添加index.html
  try_files $uri $uri/ /vuecay/index.html;
}

使用上面的访问路径：

http://ip/vuecay/path1/path2?name=cay

访问截图：

在这里插入图片描述

nginx访问日志：

"GET /vuecay/path1/path2?name=cay HTTP/1.1" 200 583 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/index.html --args: 
"GET /vuecay/js/app.a38bbab2.js HTTP/1.1" 200 1529 "http://ip/vuecay/path1/path2?name=cay" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/app.a38bbab2.js --args:- 
"GET /vuecay/js/chunk-vendors.a0183049.js HTTP/1.1" 200 46638 "http://ip/vuecay/path1/path2?name=cay" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/chunk-vendors.a0183049.js --args:- 
"GET /vuecay/js/app.a38bbab2.js.map HTTP/1.1" 200 19888 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/app.a38bbab2.js.map --args:- 
"GET /vuecay/js/chunk-vendors.a0183049.js.map HTTP/1.1" 200 677730 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/chunk-vendors.a0183049.js.map --args:-

可以看出来，地址栏未发生变化，正常显示参数，请求不会发生301，页面正常显示获取的参数。

对比两种情形的location配置

history模式丢参数的location中的try_files配置：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

history模式不丢参数的location中的try_files配置：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html。
  #vuecay后面有‘/index.html’,等同于“/”，vuecay后面有“/”会自动在“/”后面添加index.html
  try_files $uri $uri/ /vuecay/index.html;
}

  • 两者最大的区别是try_files最后面的vuecay是有带有了“/”。如果vuecay后面没带“/”代表的是资源，vuecay后面带“/”代表的是vuecay目录下的index.html。

  • 丢参数的location的try_files里的

    1. $uri
    2. $uri/
    3. /vuecay

    这三个配置是一样的意思。网上有人说$uri/是为了访问uri对应目录下的资源，但是测试中并不会自动查找index.html，当我手动添加index.html，才会去查找uri目录下的index.html。

    大家可以试试这个location：

    location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  # $uri/后面添加index.html
  try_files $uri $uri/index.html /vuecay;
}

    测试结果和$uri/后面没有index.html完全不同。

  • 不丢参数的location的try_files里配置的是 /vuecay/index.html ，等价于/vuecay/，这里后面会自动添加index.html。而$uri/后面却 不会自动添加index.html，很奇怪。

hash模式解决参数丢失

mode: 'hash'

history模式丢参数的location的try_files的配置

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

访问路径：

http://ip/vuecay/#/path1/path2?name=cay

访问截图：

在这里插入图片描述

nginx访问日志：

"GET /vuecay/ HTTP/1.1" 200 583 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-" --uri:/vuecay/index.html --args:- 
"GET /vuecay/js/chunk-vendors.a0183049.js HTTP/1.1" 200 46638 "http://ip/vuecay/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/chunk-vendors.a0183049.js --args:- 
"GET /vuecay/js/app.5c197350.js HTTP/1.1" 200 1534 "http://ip/vuecay/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/app.5c197350.js --args:- 
"GET /vuecay/js/app.5c197350.js.map HTTP/1.1" 200 19920 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/app.5c197350.js.map --args:- 
"GET /vuecay/favicon.ico HTTP/1.1" 200 4286 "http://ip/vuecay/" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-" --uri:/vuecay/favicon.ico --args:- 
"GET /vuecay/js/chunk-vendors.a0183049.js.map HTTP/1.1" 200 677730 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/chunk-vendors.a0183049.js.map --args:-

可以看出地址栏也未变化，参数未丢失，页面正常显示参数，请求未发生301，也解决了参数丢失。

history丢参数，hash模式不丢参数的原因

因为nginx默认是支持hash模式的，不像history模式还得额外配置try_files。而且这里的location是出现问题的try_files的配置，所以history模式受影响，hash模式不受影响，即history模式会丢参数，hash模式不丢参数。

想要了解更多的信息nginx配置导致301的信息，可以看一下我写的另一篇文章：nginx配置导致的301和丢参数的问题的关系

拓展

上面使用的是三级路径（ip后面跟了三层目录/vuecay/path1/path2，我这里暂且称为三级路径）：

http://ip/vuecay/path1/path2?name=cay

通过测试发现二级及以上路径，在vue为history模式并且错误的try_files配置中会丢失参数，但是一级路径却不会丢失参数

vue的模式设置为history：

mode: 'history'

history模式丢参数的location的try_files的配置：

location /vuecay {
  root   html;
  index  index.html index.htm;
  # 匹配history模式，histoty模式必须要配置，hash模式可以不用配置
  #这里有两个坑：$uri/后面没有index.html,后面不会自动添加index.html，vuecay后面没有‘/’
  try_files $uri $uri/ /vuecay;
}

测试的一级路径：

http://ip/vuecay?name=cay

访问截图：

在这里插入图片描述

nginx访问日志：

"GET /vuecay?name=cay HTTP/1.1" 301 162 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay --args:name=cay 
"GET /vuecay/?name=cay HTTP/1.1" 200 583 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/index.html --args:name=cay 
"GET /vuecay/js/chunk-vendors.a0183049.js HTTP/1.1" 200 46638 "http://ip/vuecay/?name=cay" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/chunk-vendors.a0183049.js --args:- 
"GET /vuecay/js/app.a38bbab2.js HTTP/1.1" 200 1529 "http://ip/vuecay/?name=cay" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/app.a38bbab2.js --args:- 
"GET /vuecay/js/app.a38bbab2.js.map HTTP/1.1" 200 19888 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/app.a38bbab2.js.map --args:- 
"GET /vuecay/js/chunk-vendors.a0183049.js.map HTTP/1.1" 200 677730 "-" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.0.0 Safari/537.36" "-" --uri:/vuecay/js/chunk-vendors.a0183049.js.map --args:-

可以看出来，地址栏发生变化（vuecay多了“/”），参数未丢失，请求会发生301，这是因为vuecay后面没有‘/’，所以发生301。

可见一级路径在错误的配置下，发生了301，但是却没有丢失参数，但是如果是二级路径及以上则会丢失参数，感兴趣可以尝试。

小结

  • try_files的错误配置会导致history模式下的请求的参数丢失，将try_files修改正确即可不丢失参数。
  • hash模式不需要额外配置try_files，所以不会丢失参数。
  • nginx配置的时候注意“/”，有“/” （目录下的资源，一般是index.html）和 无“/” （资源）是两种含义。
  • try_files中的$uri/ 虽然带有“/”，但是后面默认不带index.html，所以最好自己添加index.html。
  • 一级路径在vue是history模式，try_files配置有问题的情况下，不会丢失参数。

高亮的两条总结，是这次history请求丢参数的主要误区，大家一定要注意。如果大家测试的结果和我不同，欢迎一起讨论。

想要了解更多的信息nginx配置导致301的信息，可以看一下我写的另一篇文章：nginx配置导致的301和丢参数的问题的关系

附录：vue代码

我们构建简单的vue项目，使用路由，vue的相关代码如下。

Route.js

import VueRouter from "vue-router"
import HelloWorld1 from "./components/HelloWorld1"
import HelloWorld2 from "./components/HelloWorld2"
import HomeTest from "./components/HomeTest"

export default new VueRouter({
    mode: 'hash',
    base: '/vuecay/',
    deep: true,
    routes: [{
            //一级目录需要添加‘/’
            path: '/',
            component: HomeTest,
            //redirect: "/path1/path2",
            children: [{
                    path: 'path1',
                    component: HelloWorld1,
                    children: [{
                            //二级目录不需要加‘/’
                            path: 'path2',
                            component: HelloWorld2
                        }
                    ]
                }
            ]
        }
    ]
})

Vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
  transpileDependencies: true,
  publicPath: '/vuecay/'
})

Main.js

import Vue from 'vue'
import App from './App.vue'
import VueRouter from "vue-router"
import router from '@/router'

Vue.config.productionTip = false
Vue.use(VueRouter)

new Vue({
  render: h => h(App),
  router
}).$mount('#app')

App.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
}
</script>

<style>

</style>

HomeTest.vue

<template>
  <div id="app">
    <router-view/>
  </div>
</template>

<script>
//import HelloWorld from './components/HelloWorld.vue'

export default {
  name: 'App',
}
</script>

<style>

</style>

HelloWorld1.vue

<template>
  <div>
    welcome to path1,{{name}},访问的路径的参数：{{argName}}
    <div>
      <router-view/>
    </div>
  </div>
</template>

<script>
export default {
  name: 'HelloWorld1',
  data(){
    return {
      name: 'cay',
      argName: ''
    }
  },
  props: {
    msg: String
  },
  created () {
    console.log('path1:' + window.location.href)
    console.log('path1:' + this.$route.query.name)
    console.log(this.$route)
    console.log(this.$router)
    this.argName = this.$route.query.name
  }
}
</script>

<style scoped>

</style>

HelloWorld2.vue

<template>
  <div>
    welcome to path2,{{name}},访问的路径的参数：{{argName}}
  </div>
</template>

<script>
export default {
  name: 'HelloWorld2',
  data(){
    return {
      name: 'lucy',
      argName: ''
    }
  },
  props: {
    msg: String
  },
  created () {
    console.log('path2:' + window.location.href)
    console.log('path2:' + this.$route.query.name)
    console.log(this.$route)
    console.log(this.$router)
    this.argName = this.$route.query.name
    //const x = { a: 8 };
    //console.log(JSON.stringify(x))
  }
}
</script>

<style scoped>

</style>

执行命令

npm run build

将编译后的文件部署到服务器上。部署的时候惨过一些坑后面会总结贴上链接。上面的步骤已经是排除坑之后的步骤了。

# vue.js # nginx # 前端
Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Vue里echarts根据页面大小动态调整/自适应

Vue里echarts根据页面大小动态调整/自适应

avatar Vue