前后端分离,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错误的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1092400

相关文章

Python错误AttributeError: 'NoneType' object has no attribute问题的彻底解决方法

《Python错误AttributeError:NoneTypeobjecthasnoattribute问题的彻底解决方法》在Python项目开发和调试过程中,经常会碰到这样一个异常信息... 目录问题背景与概述错误解读:AttributeError: 'NoneType' object has no at

从入门到精通详解LangChain加载HTML内容的全攻略

《从入门到精通详解LangChain加载HTML内容的全攻略》这篇文章主要为大家详细介绍了如何用LangChain优雅地处理HTML内容,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下... 目录引言:当大语言模型遇见html一、HTML加载器为什么需要专门的HTML加载器核心加载器对比表二

Python使用openpyxl读取Excel的操作详解

《Python使用openpyxl读取Excel的操作详解》本文介绍了使用Python的openpyxl库进行Excel文件的创建、读写、数据操作、工作簿与工作表管理,包括创建工作簿、加载工作簿、操作... 目录1 概述1.1 图示1.2 安装第三方库2 工作簿 workbook2.1 创建:Workboo

使用Go实现文件复制的完整流程

《使用Go实现文件复制的完整流程》本案例将实现一个实用的文件操作工具:将一个文件的内容完整复制到另一个文件中,这是文件处理中的常见任务,比如配置文件备份、日志迁移、用户上传文件转存等,文中通过代码示例... 目录案例说明涉及China编程知识点示例代码代码解析示例运行练习扩展小结案例说明我们将通过标准库 os

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

RabbitMQ消息总线方式刷新配置服务全过程

《RabbitMQ消息总线方式刷新配置服务全过程》SpringCloudBus通过消息总线与MQ实现微服务配置统一刷新,结合GitWebhooks自动触发更新,避免手动重启,提升效率与可靠性,适用于配... 目录前言介绍环境准备代码示例测试验证总结前言介绍在微服务架构中,为了更方便的向微服务实例广播消息,

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典