[交互]接口与路由问题
[交互]接口与路由问题
- 场景描述
- 问题分析
- 解决方案
这是在实战开发过程中遇到的一个问题，所以导致产生了服务端如何区分浏览器请求的是前端路由还是 api 接口的问题？？
场景描述
这是一个前后端分离开发的项目，因此前端一般都会使用客户端路由，现在的场景是前端代码打包后作为 java web 的静态资源在 tomcat 中部署时，并且没有修改相关代码
此时，通过浏览器端输入域名，进入指定的 index.html 页面，加载前端路由设定，可以正常的一步步进行后续路由页面的访问
如果前端使用的 hash 路由，在浏览器直接修改路由也可以正常的进行路由的访问，与接口并不会混淆
但是如果使用的路由是浏览器路由，也即 history 模式，此时当访问非’/’(也即非根目录)的其它路由时就会出现问题
例如访问：https://xxxx 会直接跳转到前端路由"/"指定跳转到的页面.在页面中点击导航形成的跳转，会正常访问，但是当直接修改浏览器的访问路径为一个路由例如：xxxx/router/about 时服务端会将该请求直接导向 404，并不会请求前端的路由
服务端或者前端如何判断浏览器发出的请求是路由请求，还是 api 接口的请求？因为此时它们在浏览器的地址形式是完全相同的
问题分析
该问题是很久之前遇到的一个问题，当时并没有有效的解决方案，所以最终是通过将路由改为 hash 路由的方式解决的
现在在看这个问题，发现：
虽然采用了前后端分离，但是并不是完全的前后端分离
- 前后端的域名是相同的，因此导致了可能触发接口的情况
部署时将前端项目，复制到了 Java 的项目中，最终还是像未分离时部署的方式是一样的，因此域名一致 - java 项目的 xml 文件设置了静态资源的路径，指向单页面首页
- 浏览器地址非 html 后，所以没有加载前端的路由，此时自然无法实现路由的跳转
解决方案
- 完全的前后端分离，此时域名分离，自然不存在无法区分的问题
- java 配置，所有的地址指向前端的首页
相关文章：
[交互]接口与路由问题
[交互]接口与路由问题 场景描述问题分析解决方案 这是在实战开发过程中遇到的一个问题，所以导致产生了服务端如何区分浏览器请求的是前端路由还是 api 接口的问题？？ 场景描述 这是一个前后端分离开发的项目，因此前端一般都会使用…...
linux 6中4T磁盘识别并分区格式化挂接
存储端划分4T的LUN后，主机端操作如下 1、主机识别，本例中hba卡的端口是host11和host12 [rootdb1 ~]# echo "- - -" > /sys/class/scsi_host/host11/scan [rootdb1 ~]# echo "- - -" > /sys/class/scsi_host/host12/scan …...
【Unity】ShaderGraph应用(浮动气泡)
【Unity】ShaderGraph应用(浮动气泡) 实现效果 一、实现的方法 1.使用节点介绍 Position：获取模型的顶点坐标 Simple Noise:简单的噪声，用于计算顶点抖动 Fresnel Effect：菲涅耳效应，用于实现气泡效果 计算用节点 Add&…...
Android EditText setTranslationY导致输入法覆盖问题
平台 RK3288 Android 8.1 显示: 1920x1080 160 dpi 概述 碰到一个问题： 弹出的输入法会覆盖文本输入框。 原因：输入框使用了setTranslationY() 位置偏移后， 输入法无法正确获取焦点的位置。 分析 先上图: 初始布局 调用etTranslation…...
MySQL 导出和导入数据
文章目录 一，导出数据（一）使用SELECT ... INTO OUTFILE语句导出数据（二）使用mysqldump工具导出数据（三）使用SELECT ... INTO DUMPFILE语句导出数据 二，导入数据（一&#…...
ubuntu22.04 设置网卡开机自启
配置文件路径 在Ubuntu中，网络配置文件通常位于/etc/netplan/目录下，其文件名以.yaml为后缀。Netplan是Ubuntu 17.10及更高版本中默认的网络配置工具，用于配置网络接口、IP地址、网关、DNS服务器等。 我们可以看到配置文件为 01-network-ma…...
持续部署：提高敏捷加速软件交付（内含教程）
在当今快节奏的数字化环境中，企业不断寻求更快地交付软件、增强客户体验并在竞争中保持领先的方法。持续部署（Continuous Deployment, CD）已成为一种改变游戏规则的方法，使企业能够简化软件交付、提高敏捷性并缩短上市时间。持续部…...
Spark_Spark内存模型管理
工作中经常用到Spark内存调参，之前还没对这块记录，这次记录一下。 环境参数 spark 内存模型中会涉及到多个配置，这些配置由一些环境参数及其配置值有关，为防止后面理解混乱，现在这里列举出来，如果忘记了&a…...
C++之operator=与operator==用法区别(二百一十八)
简介： CSDN博客专家，专注Android/Linux系统，分享多mic语音方案、音视频、编解码等技术，与大家一起成长！ 优质专栏：Audio工程师进阶系列【原创干货持续更新中……】🚀 人生格言： 人生…...
)
【漏洞复现】WordPress插件wp-file-manager任意文件上传漏洞(CVE-2020-25213)
文章目录 前言声明一、简介二、插件介绍三、漏洞概述四、影响范围五、漏洞分析六、环境搭建七、漏洞复现手工验证file_Manager_Rce.pyfile_manager_upload.py八、修复建议前言 WordPress插件WPFileManager中存在一个严重的安全漏洞,攻击者可以在安装了此插件的任何WordPress网…...
基于安卓Java试题库在线考试系统uniapp 微信小程序
本文首先分析了题库app应用程序的需求，从系统开发环境、系统目标、设计流程、功能设计等几个方面对系统进行了系统设计。开发出本题库app，主要实现了学生、教师、测试卷、试题、考试等。总体设计主要包括系统功能设计、该系统里充分综合应用Mysql数据库、…...
Java入坑之语法糖
一、for和for-each 1.1for和for-each概念 for 循环是一种常用的循环结构，它可以通过一个变量（通常是 i）来控制循环的次数和范围。for 循环的语法格式如下： for (初始化; 布尔表达式; 更新) {//代码语句 }for-each 循环是 Java …...
VUE响应式
响应式 :::tip 提示 我们了解过响应式可以同步更新数据和视图，但是其工作原理我们最好也要了解一下。这样当你使用时遇到一些常见的错误，也能够快速定位是什么问题导致的。 了解响应式原理之前，你必须要先去了解 ES5 的 Object.defineProper…...
Godot 和 VScode配置C#环境注意事项
前言 尽管有些博主会建议如果我们熟悉C#的话，最好还是使用GDscript，而且对于小白上手也相对简单，但是C#的性能终究还是比动态语言好，也相比CPP简单些，尽管现在Godot还是有些问题，比如不像unity那样适配swit…...
三、Mediasoup进程通信实现的原理
Mediasoup 创建父子进程，js与c进程交互的通道 worker.js构造函数中创建父子进程，c通过libuv的socket可以实现 JavaScript 与 C 之间的相互收发消息 一、 父子进程通信 这是一个简单的示例，演示了如何使用 libuv 在父子进程之间进行通信。以…...
【计算机网络】 TCP——四次挥手
文章目录 流程考点 流程 主动方打算关闭连接，此时会发送一个TCP首部FIN标志位被置为1的报文，也即FIN报文，之后主动方进入FIN_WAIT_1状态。被动方收到该报文后，就向主动方发送ACK应答报文，接着被动方进入CLOSE_WAIT状态…...
「Java开发指南」在MyEclipse中的Spring开发（二）
在上文中（点击这里回顾>>），我们主要介绍了一些Spring的基本概念、Spring项目配置及向导，本章节将继续介绍如何管理多个项目，Spring配置编辑器等，欢迎持续关注~ MyEclipse v2023.1.2离线版下载(Q技术…...
策略模式，一种广泛应用于各种情况的设计模式（设计模式与开发实践 P5）
文章目录 策略模式实现思想实战 - 表单 策略模式 定义：定义一系列算法，把它们一个个封装起来，并且可以互相替换 例如，我们要计算年终奖，年终奖根据绩效 A、B、C 来计算最终数值 实现 最初我们很容易想到用 分支 if…...
90. 子集 II
给你一个整数数组 nums ，其中可能包含重复元素，请你返回该数组所有可能的子集（幂集）。 解集 不能 包含重复的子集。返回的解集中，子集可以按 任意顺序 排列。 示例 1： 输入：nums [1,2,2] 输出…...
第四章编程练习题答案)
Intel汇编语言程序设计(第7版)第四章编程练习题答案
1. 大端序转成小端序 .386 .model flat, stdcall option casemap:none include windows.inc include kernel32.inc includelib kernel32.lib include user32.inc includelib user32.lib.stack 4096.data bigEndian BYTE 12h, 34h, 56h, 78h littleEndian DWORD ?Fmt BYTE &…...
Leetcode 3576. Transform Array to All Equal Elements
Leetcode 3576. Transform Array to All Equal Elements 1. 解题思路2. 代码实现 题目链接：3576. Transform Array to All Equal Elements 1. 解题思路 这一题思路上就是分别考察一下是否能将其转化为全1或者全-1数组即可。 至于每一种情况是否可以达到…...
反向工程与模型迁移：打造未来商品详情API的可持续创新体系
在电商行业蓬勃发展的当下，商品详情API作为连接电商平台与开发者、商家及用户的关键纽带，其重要性日益凸显。传统商品详情API主要聚焦于商品基本信息（如名称、价格、库存等）的获取与展示，已难以满足市场对个性化、智能…...
黑马Mybatis
Mybatis 表现层：页面展示 业务层：逻辑处理 持久层：持久数据化保存 在这里插入图片描述 Mybatis快速入门 
spring：实例工厂方法获取bean
spring处理使用静态工厂方法获取bean实例，也可以通过实例工厂方法获取bean实例。 实例工厂方法步骤如下： 定义实例工厂类（Java代码），定义实例工厂（xml），定义调用实例工厂ÿ…...
【Zephyr 系列 10】实战项目：打造一个蓝牙传感器终端 + 网关系统（完整架构与全栈实现）
🧠关键词：Zephyr、BLE、终端、网关、广播、连接、传感器、数据采集、低功耗、系统集成 📌目标读者：希望基于 Zephyr 构建 BLE 系统架构、实现终端与网关协作、具备产品交付能力的开发者 📊篇幅字数：约 5200 字 ✨ 项目总览 在物联网实际项目中，**“终端 + 网关”**是…...
算法笔记2
1.字符串拼接最好用StringBuilder，不用String 2.创建List<>类型的数组并创建内存 List arr[] new ArrayList[26]; Arrays.setAll(arr, i -> new ArrayList<>()); 3.去掉首尾空格...
【p2p、分布式，区块链笔记 MESH】Bluetooth蓝牙通信 BLE Mesh协议的拓扑结构 定向转发机制
目录 节点的功能承载层（GATT/Adv）局限性： 拓扑关系定向转发机制定向转发意义 CG 节点的功能 节点的功能由节点支持的特性和功能决定。所有节点都能够发送和接收网格消息。节点还可以选择支持一个或多个附加功能，如 Configuration …...
【LeetCode】算法详解#6 ---除自身以外数组的乘积
1.题目介绍 给定一个整数数组 nums，返回 数组 answer ，其中 answer[i] 等于 nums 中除 nums[i] 之外其余各元素的乘积 。 题目数据 保证 数组 nums之中任意元素的全部前缀元素和后缀的乘积都在 32 位 整数范围内。 请 不要使用除法，且在 O…...
 ——通用对象池总结(核心))
怎么开发一个网络协议模块（C语言框架）之(六) ——通用对象池总结(核心)
+---------------------------+ | operEntryTbl[] | ← 操作对象池 (对象数组) +---------------------------+ | 0 | 1 | 2 | ... | N-1 | +---------------------------+↓ 初始化时全部加入 +------------------------+ +-------------------------+ | …...
el-amap-bezier-curve运用及线弧度设置
文章目录 简介示例线弧度属性主要弧度相关属性其他相关样式属性完整示例链接简介 el-amap-bezier-curve 是 Vue-Amap 组件库中的一个组件，用于在 高德地图 上绘制贝塞尔曲线。 基本用法属性path定义曲线的路径，可以是多个弧线段的组合。stroke-weight线条的宽度。stroke…...