当前位置: 首页 > news >正文

【踩坑纪实】URL 特殊字符 400 异常

URL 特殊字符 400 异常

笔者之前在写后端或者前端时,在处理表单时,经常有对特殊字符的检验处理,但自己也不清楚为什么要这么做,浅浅地以为可能是特殊字符不好看或者存取可能会造成异常?不过一直没遇到过问题,也就不在意这了。

巧的是,昨天在实习公司,测试小姐姐居然给我提了一个关于特殊字符异常的BUG,我就那了闷了,头一回见这种异常,不过做过了解后,才发现不是什么疑难杂症,一起来看看吧。

问题情景

开发环境:react,umi,ant design pro

某系统,创建任务阶段,在键入任务名字时,输入 “[” 字符时会弹出 400 异常。

对于任务名字,后端提供了一个检验重名的 GET 接口,这个 bug 是请求检验重名出了错。

前端检验重名的相关代码:

<ProFormText//...rules={[{ validator: validators.taskName }]}width="lg"name="taskName"placeholder="请输入任务名称"/>
const validator = {taskName: (value) => {// 调用检验重名接口 - GETfetchTaskNameValid({taskId: queryParams.taskId,taskName: value,).then(res => {//...})}
}

问题分析

  1. 在键入时就报了异常,是因为没有设置校验时机为 “onSubmit”,而是默认的 “onChange”
  2. 输入 “[” 报了异常,显然和 “[” 字符有关,"[" 本身也不算多少特殊的字符,但问题在于后端给的那个接口的请求方式是 GET,任务名字是在 URL 路径中传输的,问题就在这了,也许大家平常不会过多的关注 url 路径长什么样,但肯定注意到过中文在 URL 路径中是被转换成 “%xxxx” 的形式传输的,其实 “[” 之类的字符也是同样的道理,如果不进行转换直接传输这些特殊的字符,就违背的 URL 的语法规则,自然就会异常了。

解决方案

  1. 修正检验的触发时机,调整为 “onSubmit”
<ProFormText//...rules={[{ validator: validators.taskName, validateTrigger: "onSubmit" }]}width="lg"name="taskName"placeholder="请输入任务名称"/>
  1. 转义处理任务名中的特殊字符
    我如何知道哪些字符是特殊的呢?它们应该被转换成怎么样的字符?我一开始也是傻乎乎的一个个去查看特殊字符和它们的编码并手动转换,这其实不用我们去关系,Js 直接提供了编码字符串为合法 URL 的方法(encodeURL):
taskName: encodeURL(value),

这样就可以了,任务名中的特殊字符被转义了,不过更规范的做法不是直接处理任务名,而是应该在封装 Api 的时候,就对 URL 字符串进行转换后再请求。

话说 umi 内置的 request 怎么不主动在请求前 encodeURL 一下路径,作为框架的使用者不应该需要额外处理这个问题,就跟某些 orm 框架不默认给表名加上反引号一样,太不贴心了

相关文章:

【踩坑纪实】URL 特殊字符 400 异常

URL 特殊字符 400 异常 笔者之前在写后端或者前端时&#xff0c;在处理表单时&#xff0c;经常有对特殊字符的检验处理&#xff0c;但自己也不清楚为什么要这么做&#xff0c;浅浅地以为可能是特殊字符不好看或者存取可能会造成异常&#xff1f;不过一直没遇到过问题&#xff…...

Contents:帮助公司为营销目的创建内容

【产品介绍】 名称 Contents上线时间 2017年5月 具体描述 Contents是一家提供基于人工智能的内容生成平台的企业&#xff0c;可以帮助用户在各种网站和工具中使用最先进的机器学习模型&#xff0c;实现视频编辑、图像生成、3D建模等内容创作。【团队介绍…...

1397: 图的遍历——广度优先搜索

题目描述 广度优先搜索遍历类似于树的按层次遍历的过程。其过程为&#xff1a;假设从图中的某顶点v出发&#xff0c;在访问了v之后依次访问v的各个未曾被访问过的邻接点&#xff0c;然后分别从这些邻接点出发依次访问它们的邻接点&#xff0c;并使“先被访问的顶点的邻接点”先…...

Java 华为真题-选修课

需求&#xff1a; 现有两门选修课&#xff0c;每门选修课都有一部分学生选修&#xff0c;每个学生都有选修课的成绩&#xff0c;需要你找出同时选修了两门选修课的学生&#xff0c;先按照班级进行划分&#xff0c;班级编号小的先输出&#xff0c;每个班级按照两门选修课成绩和的…...

Invalid access token: Invalid header string: ‘utf-8‘ codec can‘t decode byte

报错&#xff1a;在运行一个txt文档时报Invalid access token: Invalid header string: ‘utf-8’ codec can’t decode byte 原因&#xff1a;文档编码方式的原因&#xff0c;电脑默认的是UFT-8格式的编码 解决方法&#xff1a;用notepad改一下文档编码就好...

Java 中将多个 PDF 文件合并为一个 PDF

一.前言 我们将从以下两个方面向您展示如何将多个PDF文件合并为一个PDF&#xff1a; 1. 将文件中的多个 PDF 合并为单个 PDF 2. 将流中的多个 PDF 合并为单个 PDF 1. 了解 Spire.PDF 库 要在 Java 中合并 PDF 文件&#xff0c;我们将使用Spire.PDF 库。Spire.PDF for Java 是…...

python经典百题之水仙花数

题目&#xff1a;打印出所有的“水仙花数”&#xff0c;所谓“水仙花数”是指一个三位数&#xff0c;其各位数字立方和等于该数 本身。例如&#xff1a;153是一个“水仙花数”&#xff0c;因为1531的三次方&#xff0b;5的三次方&#xff0b;3的三次方。 方法一&#xff1a;暴…...

jvm的调优工具

1. jps 查看进程信息 2. jstack 查看进程的线程 59560为进程id 产生了死锁就可以jstack查看了 详细用途可以看用途 3. jmap 如何使用dump文件看下 查看 4.jstat 空间占用和次数 5. jconsole可视化工具 各种使用情况&#xff0c;以及死锁检测 6. visualvm可视化工具…...

C语言--字符串旋转笔试题

C语言–字符串旋转笔试题 文章目录 C语言--字符串旋转笔试题一、字符串左旋1.1 思路11.2 思路1代码1.3 思路21.4 思路2代码 二、字符串旋转结果判断2.1 思路12.2 思路2 一、字符串左旋 实现一个函数&#xff0c;可以左旋字符串中的k个字符。 例如&#xff1a; ABCD左旋一个字…...

IntelliJ IDEA使用_常规设置

文章目录 版本说明主题设置取消检查更新依赖自动导入禁止import xxx.*、允许import内部类显示行号、方法分割线、空格代码提示&#xff08;匹配所有字母&#xff09;自定义注释颜色添加头部注释自定义字体设置字符编码关联本地GitJDK编译版本Maven配置Tomcat配置代码注释设置头…...

ResponseBodyAdvice 获取参数

废话不多说&#xff0c;简练&#xff0c;一针见血&#xff0c;解决问题&#xff0c;才是最好的。 首先肯定是重写了这个beforeBodyWrite方法 重点来了&#xff0c;获取请求参数&#xff1a; request.getBody()返回一个inputStream流&#xff0c;这里你可以 使用很多方法把这个…...

人力资源服务升级正当时,法大大助力佩信集团加速数字化

人力资源服务业是现代服务业的一个重要门类&#xff0c;在促进就业创业、提供人才服务方面发挥重要作用。同时面对产业转型升级、平台经济快速发展、企业用工成本提高等新形势&#xff0c;发展人力资源服务业对于促进社会化就业、更好发挥我国人力资源优势、服务经济社会发展具…...

UG\NX二次开发 二维向量相加

文章作者:里海 来源网站:王牌飞行员_里海_里海NX二次开发3000例,里海BlockUI专栏,C\C++-CSDN博客 简介: UG\NX二次开发 二维向量相加 效果: 代码: #include "me.hpp"void doIt() {const double vec1[2] = { 1.0,2.0 };const double vec2[2] = { 2.0,2.…...

RabbitMQ深入 —— 持久化和发布确认

前言 前面的文章荔枝梳理了如何去配置RabbitMQ环境并且也介绍了两种比较简单的运行模式&#xff0c;在这篇文章中荔枝将会继续梳理有关RabbitMQ的持久化机制以及发布确认模式的相关知识&#xff0c;希望能够帮助到大家~~~ 文章目录 前言 一、持久化 1.1 队列持久化 1.2 消息…...

人脸识别三部曲

人脸识别三部曲 首先看目录结构图像信息采集 采集图片.py模型训练 训练模型.py人脸识别 人脸识别.py效果 首先看目录结构 引用文121本 opencv │ 采集图片.py │ 训练模型.py │ 人脸识别.py │ └───trainer │ │ trainer.yml │ └───data │ └──…...

【Linux网络编程】Socket-TCP实例

netstat -nltp 无法用read函数读取UDP套接字的数据&#xff0c;因为UDP是面向数据报&#xff0c;而TCP是面向数据流。 客户端不需要 bind&#xff0c;listen&#xff0c;accept&#xff0c;但是客户端需要connect&#xff0c;connect会自动做bind工作。 #include <sys/sock…...

<OpenCV> 边缘填充

OpenCV边缘填充 1、边缘填充类型 enum cv::BorderTypes ORDER_CONSTANT iiiiii|abcdefgh|iiiiiii with some specified i -常量法&#xff0c;常熟值填充&#xff1b; BORDER_REPLICATE aaaaaa|abcdefgh|hhhhhhh -复制法&#xff0c;复制边缘像素&#xff1b; BORDER_R…...

【视觉SLAM入门】7.3.后端优化 基于KF/EKF和基于BA图优化的后端,推导及举例分析

"时间倾诉我的故事" 1. 理论推导2. 主流解法3. 用EKF估计状态3.1. 基于EKF代表解法的感悟 4. 用BA法估计状态4.1 构建最小二乘问题4.2 求解BA推导4.3 H的稀疏结构4.4 根据H稀疏性求解4.5 鲁棒核函数4.6 编程注意 5.总结 引入&#xff1a; 前端里程计能给出一个短时间…...

Docker概念通讲

目录 什么是Docker&#xff1f; Docker的应用场景有哪些&#xff1f; Docker的优点有哪些&#xff1f; Docker与虚拟机的区别是什么&#xff1f; Docker的三大核心是什么&#xff1f; 如何快速安装Docker&#xff1f; 如何修改Docker的存储位置&#xff1f; Docker镜像常…...

PHP请求API接口案例采集电商平台数据获取淘宝/天猫优惠券查询示例

优惠券查询API接口对于用户和商家来说具有重要作用&#xff0c;可以方便地获取优惠券信息&#xff0c;进行优惠券搜索和筛选&#xff0c;参与活动和促销推广&#xff0c;提供数据分析和决策支持&#xff0c;提升用户体验和忠诚度&#xff0c;为商家增加销售额和市场竞争力。 t…...

变量 varablie 声明- Rust 变量 let mut 声明与 C/C++ 变量声明对比分析

一、变量声明设计&#xff1a;let 与 mut 的哲学解析 Rust 采用 let 声明变量并通过 mut 显式标记可变性&#xff0c;这种设计体现了语言的核心哲学。以下是深度解析&#xff1a; 1.1 设计理念剖析 安全优先原则&#xff1a;默认不可变强制开发者明确声明意图 let x 5; …...

vscode里如何用git

打开vs终端执行如下&#xff1a; 1 初始化 Git 仓库&#xff08;如果尚未初始化&#xff09; git init 2 添加文件到 Git 仓库 git add . 3 使用 git commit 命令来提交你的更改。确保在提交时加上一个有用的消息。 git commit -m "备注信息" 4 …...

C++_核心编程_多态案例二-制作饮品

#include <iostream> #include <string> using namespace std;/*制作饮品的大致流程为&#xff1a;煮水 - 冲泡 - 倒入杯中 - 加入辅料 利用多态技术实现本案例&#xff0c;提供抽象制作饮品基类&#xff0c;提供子类制作咖啡和茶叶*//*基类*/ class AbstractDr…...

工业安全零事故的智能守护者:一体化AI智能安防平台

前言&#xff1a; 通过AI视觉技术&#xff0c;为船厂提供全面的安全监控解决方案&#xff0c;涵盖交通违规检测、起重机轨道安全、非法入侵检测、盗窃防范、安全规范执行监控等多个方面&#xff0c;能够实现对应负责人反馈机制&#xff0c;并最终实现数据的统计报表。提升船厂…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

解锁数据库简洁之道:FastAPI与SQLModel实战指南

在构建现代Web应用程序时&#xff0c;与数据库的交互无疑是核心环节。虽然传统的数据库操作方式&#xff08;如直接编写SQL语句与psycopg2交互&#xff09;赋予了我们精细的控制权&#xff0c;但在面对日益复杂的业务逻辑和快速迭代的需求时&#xff0c;这种方式的开发效率和可…...

Java-41 深入浅出 Spring - 声明式事务的支持 事务配置 XML模式 XML+注解模式

点一下关注吧&#xff01;&#xff01;&#xff01;非常感谢&#xff01;&#xff01;持续更新&#xff01;&#xff01;&#xff01; &#x1f680; AI篇持续更新中&#xff01;&#xff08;长期更新&#xff09; 目前2025年06月05日更新到&#xff1a; AI炼丹日志-28 - Aud…...

【生成模型】视频生成论文调研

工作清单 上游应用方向&#xff1a;控制、速度、时长、高动态、多主体驱动 类型工作基础模型WAN / WAN-VACE / HunyuanVideo控制条件轨迹控制ATI~镜头控制ReCamMaster~多主体驱动Phantom~音频驱动Let Them Talk: Audio-Driven Multi-Person Conversational Video Generation速…...

CVE-2020-17519源码分析与漏洞复现(Flink 任意文件读取)

漏洞概览 漏洞名称&#xff1a;Apache Flink REST API 任意文件读取漏洞CVE编号&#xff1a;CVE-2020-17519CVSS评分&#xff1a;7.5影响版本&#xff1a;Apache Flink 1.11.0、1.11.1、1.11.2修复版本&#xff1a;≥ 1.11.3 或 ≥ 1.12.0漏洞类型&#xff1a;路径遍历&#x…...

【Go语言基础【12】】指针:声明、取地址、解引用

文章目录 零、概述&#xff1a;指针 vs. 引用&#xff08;类比其他语言&#xff09;一、指针基础概念二、指针声明与初始化三、指针操作符1. &&#xff1a;取地址&#xff08;拿到内存地址&#xff09;2. *&#xff1a;解引用&#xff08;拿到值&#xff09; 四、空指针&am…...