[交互]接口与路由问题

[交互]接口与路由问题

  • 场景描述
  • 问题分析
  • 解决方案

这是在实战开发过程中遇到的一个问题,所以导致产生了服务端如何区分浏览器请求的是前端路由还是 api 接口的问题??

场景描述

这是一个前后端分离开发的项目,因此前端一般都会使用客户端路由,现在的场景是前端代码打包后作为 java web 的静态资源在 tomcat 中部署时,并且没有修改相关代码

此时,通过浏览器端输入域名,进入指定的 index.html 页面,加载前端路由设定,可以正常的一步步进行后续路由页面的访问

如果前端使用的 hash 路由,在浏览器直接修改路由也可以正常的进行路由的访问,与接口并不会混淆

但是如果使用的路由是浏览器路由,也即 history 模式,此时当访问非’/’(也即非根目录)的其它路由时就会出现问题

例如访问:https://xxxx 会直接跳转到前端路由"/"指定跳转到的页面.在页面中点击导航形成的跳转,会正常访问,但是当直接修改浏览器的访问路径为一个路由例如:xxxx/router/about 时服务端会将该请求直接导向 404,并不会请求前端的路由

服务端或者前端如何判断浏览器发出的请求是路由请求,还是 api 接口的请求?因为此时它们在浏览器的地址形式是完全相同的

问题分析

该问题是很久之前遇到的一个问题,当时并没有有效的解决方案,所以最终是通过将路由改为 hash 路由的方式解决的

现在在看这个问题,发现:
虽然采用了前后端分离,但是并不是完全的前后端分离

  • 前后端的域名是相同的,因此导致了可能触发接口的情况
    部署时将前端项目,复制到了 Java 的项目中,最终还是像未分离时部署的方式是一样的,因此域名一致
  • java 项目的 xml 文件设置了静态资源的路径,指向单页面首页
  • 浏览器地址非 html 后,所以没有加载前端的路由,此时自然无法实现路由的跳转

解决方案

  1. 完全的前后端分离,此时域名分离,自然不存在无法区分的问题
  2. java 配置,所有的地址指向前端的首页

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

VR头显Unity下如何实现毫秒级延迟的RTMP或RTSP播放?

技术背景 虚拟现实(VR)技术的互动性和沉浸感,为我们提供了一种全新的视觉体验,不过,如果需要实现真正的沉浸式体验,VR播放的延迟问题非常重要。 好多VR场景下,如果存在延迟,用户在…

Android 官方屏幕适配之ScreenMatch

背景: Android 项目的一个app需要适配手机平板,为了一套UI和可以适配2个不同屏幕,记录一个适配的技巧: 前提,使用这个框架:GitHub - wildma/ScreenAdaptation: :fire:一种非常好用的 Android 屏幕适配——…

第9节-PhotoShop基础课程-移动抓手缩放工具

文章目录 前言1. 移动工具1.移动工具1.自动选择(图层和组)2.显示变换控件 (Shift 变换/ Ctrl 变换)3.自由变换 Ctrl T (Shift 变换/ Ctrl 变换)4.对齐功能 2.画板工具 V1. 创建画板并作图2.导出画板 2.路…

Blender批量修改名称

假如在Blender里按顺序添加了多个mesh,名字后缀按照数字1,2,3…编号,此时又要插入一个新的mesh,那么这个mesh之后的其它mesh名字都要加1,此时该怎么办呢? 比较简单的办法是把新mesh后面的mesh名称一个一个手动加1&…

20230912在ubuntu18.04下使用pigz来提高tar命令压缩解压缩的速度

20230912在ubuntu18.04下使用pigz来提高tar命令压缩解压缩的速度 2023/9/15 22:19 https://blog.csdn.net/wb4916/article/details/128447298 20221226编译Toybrick的TB-RK3588X开发板的Android12系统2-SDK预处理 4、单线程压缩。 建议使用:pigz多线程压缩&#xf…

关于 firefox 不能访问 http 的解决

情景: 我在虚拟机 192.168.x.111 上配置了 DNS 服务器,在 kali 上设置 192.168.x.111 为 DNS 服务器后,使用 firefox 地址栏搜索域名 www.xxx.com ,访问在 192.168.x.111 搭建的网站,本来经 192.168.x.111 DNS 服务器解…

DBeaver 下载、安装与数据库连接(MySQL)详细教程【超详细,保姆级教程!!!】

本文介绍DBeaver 下载、安装与数据库连接(MySQL)的详细教程 一、DBeaver 下载 官网下载地址:https://dbeaver.io/download/ 二、安装 1、双击下载的安装包,选择中文 2、点击下一步 3、点击我接受 4、如下勾选,…

javascript检测网页缩放演示代码

一、为什么会提示浏览器显示比例不正常? 在网上冲浪,有时在打某个网站时,会提示你的浏览器显示比例不是100%,建议你将浏览器显示比例恢复为100%,以便获得最佳显示效果。 二、检测网页缩放比例的方法 那么这些网站是如…

基于MSP430 红外避障-遥控小车(电赛必备 附项目代码)

文章目录 一、硬件清单二、模块连接三、程序设计四、项目源码 项目环境: 1. MSP430F55292. Code Composer Studio3. 蓝牙调试助手 项目简介: 小车可分为3种工作模式,每种工作模式都会打印在OLED显示屏上,通过按键转换工作模式。 模…

代码随想录算法训练营Day46 | 动态规划(8/17) 1.练习题 LeetCode 139.单词拆分 2.多重背包 3. 背包问题总结篇!

背包问题要结束了!首先是今天的练习题,然后是多重背包的知识点,最后对这几天背包问题做一个总结! 1. 练习题 139. Word Break Given a string s and a dictionary of strings wordDict, return true if s can be segmented into…

单例模式,适用于对象唯一的情景(设计模式与开发实践 P4)

文章目录 单例模式实现代理单例惰性单例 上一章后续的内容是关于 JS 函数闭包的,考虑很多读者已经有了闭包基础或者希望通过实战理解,遂跳过上一章直接开始设计模式篇~ 需要注意的是,代码部分仅供参考,主要关注的内容是…

752. 打开转盘锁

链接&#xff1a; 752. 打开转盘锁 题解&#xff1a; class Solution { public:int openLock(vector<string>& deadends, string target) {std::unordered_set<std::string> table(deadends.begin(), deadends.end());if (table.find("0000") ! t…

华为云云服务器云耀L实例评测 | 华为云云服务器实例新品全面解析

&#x1f337;&#x1f341; 博主猫头虎&#xff08;&#x1f405;&#x1f43e;&#xff09;带您 Go to New World✨&#x1f341; &#x1f984; 博客首页——&#x1f405;&#x1f43e;猫头虎的博客&#x1f390; &#x1f433; 《面试题大全专栏》 &#x1f995; 文章图文…

零基础学前端(四)重点讲解 CSS

1. 该篇适用于从零基础学习前端的小白 2. 初学者不懂代码得含义也要坚持模仿逐行敲代码&#xff0c;以身体感悟带动头脑去理解新知识 3. 初学者切忌&#xff0c;不要眼花缭乱&#xff0c;不要四处找其它文档&#xff0c;要坚定一个教授者的方式&#xff0c;将其学通透&#xff…

【数据结构】串的模式匹配:简单的模式匹配算法,KMP算法

欢~迎~光~临~^_^ 目录 知识树 1、什么是串的模式匹配 2、简单的模式匹配算法 3、KMP算法 3.1 算法原理 3.2 C语言实现KMP算法 3.3 求next数组 3.4 KMP算法优化&#xff08;对next数组的优化&#xff09; 知识树 1、什么是串的模式匹配 串的模式匹配是在一个字符串中…

vscode和HBuilderx设置快捷键注释

一、vscode设置快捷键注释 1.打开vscode&#xff0c;使用快捷键&#xff1a;ctrlshiftp mac的话快捷键是&#xff1a;commandshiftp 然后在行中输入snippets 2.选择“新建”&#xff0c;选择将要配置的文件类型&#xff08;以vue类型为例&#xff09;我这里创建的名字为vue.…

编译原生安卓aosp源码,实现硬改以及定位

系列文章目录 第一章 安卓aosp源码编译环境搭建 第二章 手机硬件参数介绍和校验算法 第三章 修改安卓aosp代码更改硬件参数 第四章 编译定制rom并刷机实现硬改(一) 第五章 编译定制rom并刷机实现硬改(二) 第六章 不root不magisk不xposed lsposed frida原生修改定位 第七章 安卓…

sentinel实现对openfeign保护

引入依赖<dependency><groupId>com.alibaba.cloud</groupId><artifactId>spring-cloud-starter-alibaba-sentinel</artifactId> </dependency>yml添加配置feign:sentinel:enabled: true编写feign接口并配置fallback属性FeignClient(value …

Python xlwings打开excel表格进行最大化

使用xlwings打开Excel表并最大化窗口 在Python中&#xff0c;xlwings是一个强大的库&#xff0c;它可以与Excel交互&#xff0c;使你能够使用Python操作Excel表格。有时&#xff0c;我们可能需要在打开Excel表格时将窗口最大化&#xff0c;以便更好地进行数据分析和处理。 本文…

阶段性总结:跨时钟域同步处理

对时序图与Verilog语言之间的转化的认识&#xff1a; 首先明确工程要实现一个什么功能&#xff1b;用到的硬件实现一个什么功能。 要很明确这个硬件的工作时序&#xff0c;即&#xff1a;用什么样的信号&#xff0c;什么变化规则的信号去驱动这个硬件。 然后对工程进行模块划…