前后端分离，Vue-Router使用history路由模式，页面刷新报401错误

本文主要是介绍前后端分离，Vue-Router使用history路由模式，页面刷新报401错误，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

路由跳转和请求响应都正常，但是一刷新页面，就出现该401错误，查看vue前端项目，路由使用的是history模式。

vue路由有两种模式：hash和history，两者的区别主要为：

1. 路由格式上。hash模式通过#将路由分开，history模式没有；
2. 服务访问。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 进行客户端路由处理。

这篇关于前后端分离，Vue-Router使用history路由模式，页面刷新报401错误的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---