路由跳转和请求响应都正常,但是一刷新页面,就出现该401错误,查看vue前端项目,路由使用的是history模式。
vue路由有两种模式:hash和history,两者的区别主要为:
- 路由格式上。
hash
模式通过#将路由分开,history
模式没有;- 服务访问。
hash
模式不需要服务器配置,可以直接访问,且不会报错;在Vue中使用history模式路由时,当页面刷新后,浏览器会向服务器发送请求以获取对应URL的资源。这是因为history模式利用了HTML5 History API来实现页面的无刷新跳转,使得URL看起来更加美观,更接近传统的URL路径。然而,这也意味着当用户在浏览器直接访问或刷新某个URL时,服务器需要能够正确处理这个请求,返回对应的页面内容。因此,在使用history模式时,需要对服务器进行配置,以便在URL匹配不到任何静态资源时,返回同一个index.html
页面,这个页面是Vue应用依赖的入口页面。
查看vue.config.js文件中代理配置:
proxy: {
'^/api': {
target: process.env.VUE_APP_BASE_API,
changeOrigin: true,
pathRewrite: {
['^' + '/api']: ''
}
},
'^/ops': {
target: process.env.VUE_APP_OPS_API,
changeOrigin: true,
pathRewrite: {
['^' + '/ops']: ''
}
}
}
可看出对于^/ops'开头的请求路径会被重写,所以刷新页面后浏览器向服务器发送的路由请求https://localhost:9528/ops/logManage路径被重写后的URL匹配不到index.html
页面,故返回401错误,所以将页面的路由地址/ops/logManage改成/manageOps/logManage或其他不会被代理配置匹配重写的路径就好了(或者去修改接口请求url地址和代理配置)。
当浏览器加载或刷新页面时,向本地开发环境的 Vue 服务发送 document 、xhr等请求,发送的请求会经历如下步骤:
一、到达开发服务器
- 开发服务器: Vue CLI 开发服务器(通常是 webpack-dev-server)接收到这个请求。开发服务器在
vue.config.js
的devServer
配置中定义。二、 请求匹配
1.匹配代理::开发服务器根据 devServer.proxy 配置中的规则匹配请求路径。如果请求路径与配置中的规则相符,则会触发代理处理。
2. 路径重写:在代理配置中,pathRewrite 用于重写请求路径。开发服务器会根据 pathRewrite 的规则修改请求的路径。例如,如果原始请求是 /api/index,并且配置了 pathRewrite 将 /api 重写为 /,则请求路径将变成 /index。
module.exports = {
devServer: {
proxy: {
'/api': {
target: 'http://localhost:3000',
pathRewrite: { '^/api': '' },
},
},
},
};3. 代理转发请求: 重写后的请求路径会被转发到 target 指定的目标服务器。在上面的例子中,请求会被转发到 http://localhost:3000/index。
4. 目标服务器处理和响应: 目标服务器处理重写后的请求路径,并返回相应的响应内容。
5. 响应返回:开发服务器将目标服务器的响应返回给浏览器。浏览器接收到响应后,会继续加载和渲染页面。
三、处理未被匹配的请求(Document 请求)
1. 开发服务器处理(publicPath: '/': 设置为 '/' 确保了应用资源的路径相对于根路径。它确保在开发模式下,构建的应用能够正确引用资源。):
a1.开发服务器配置: Vue CLI 使用 webpack-dev-server 作为开发服务器。这个服务器能够处理各种请求,并根据配置返回适当的文件。
a2.路径解析: 在开发模式下,publicPath 为 '/' 说明所有的资源路径都是相对于根路径的。即使你访问的是 /about,publicPath 的设置确保了静态资源的路径都是相对根路径 /。
a3.主 HTML 文件: 开发服务器会根据请求路径返回主 HTML 文件(index.html),这通常是 Vue 应用的入口文件。对于所有非静态资源的请求(比如 / 或 /about),开发服务器默认会返回 index.html,这是因为 Vue 的前端路由通常是在客户端处理的。2. SPA 路由处理
b1.前端路由: 在 Vue 的 SPA(单页面应用)中,前端路由由 Vue Router 处理。当用户请求的路径(例如 /about)与服务器上的静态资源不匹配时,开发服务器会返回 index.html,并由 Vue Router 进行客户端路由处理。