axios get 请求 url 转码 空格转成+,导致请求失败(前端解决)

问题

GET 请求参数: 

URL-encoded 后: 

 浏览器将空格转成了+,导致服务报错,返回 400。

解决

在请求拦截器中,对 params 进行处理。

axios.interceptors.request.use((config) => {let url = config.url;if (config.method === "get" && config.params) {url += "?"; // 拼接参数// 获取所有参数,通过循环 拼接所有参数,encodeURIComponent对参数编码,Object.keys(config.params).map((key) => {url += `${key}=${encodeURIComponent(config.params[key])}&`;});url = url.substring(0, url.length - 1); // 删除最后一个&字符config.params = {}; // 参数已经存在于 url中}config.url = url;return config;});


URL中的空格有时候被编码成%20,有时候被编码成加号+。

W3C标准规定,当Content-Type为application/x-www-form-urlencoded时,URL中查询参数名和参数值中空格要用加号+替代,所以几乎所有使用该规范的浏览器在表单提交后,URL查询参数中空格都会被编成加号+。

而在另一份规范(RFC 2396,定义URI)里, URI里的保留字符都需转义成%HH格式(Section 3.4 Query Component),因此空格会被编码成%20,加号+本身也作为保留字而被编成%2B,对于某些遵循RFC 2396标准的应用来说,它可能不接受查询字符串中出现加号+,认为它是非法字符。所以一个安全的举措是URL中统一使用%20来编码空格字符。

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

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

相关文章

ES监控方法以及核心指标

文章目录 1. 监控指标采集1.1 部署elasticsearch_exporter1.2 prometheus采集elasticsearch_exporter的暴露指标1.3 promethues配置告警规则或者配置grafana大盘 2. 核心告警指标2.1 es核心指标2.2 es容量模型建议 3. 参考文章 探讨es的监控数据采集方式以及需要关注的核心指标…

python-自动化篇-办公-一键将word中的表格提取到excel文件中

文章目录 代码 工作中,经常需要将Word文档中的表格粘贴到Excel文件中,以便汇总及分析。一个一个复制粘贴,非常不方便,还是Python自动化操作,省心省力。要求如下图所示,即将word中的所有表格,转存…

闲聊电脑(6)装个 Windows(二)

闲聊电脑(6)装个 Windows(二) 夜深人静,万籁俱寂,老郭趴在电脑桌上打盹,桌子上的小黄鸭和桌子旁的冰箱又开始窃窃私语…… 小黄鸭:冰箱大哥,上次说的镜像文件到底长啥样…

VMware虚拟机安装openEuler系统(一)(2024)

目录 一、下载ISO镜像 二、开始创建虚拟机 通过实践是学习openEuler开源Linux系统的最佳方式。因此我们首先得搭建一个openEuler实战环境,文章是在Windows系统上使用VMware Workstation虚拟化软件,安装和学习openEuler开源Linux操作系统。 使用虚拟机…

【wu-lazy-cloud-network】Java自动化内网穿透

项目介绍 wu-lazy-cloud-network 是一款基于(wu-framework-parent)孵化出的项目,内部使用Lazy ORM操作数据库,主要功能是网络穿透,对于没有公网IP的服务进行公网IP映射 使用环境JDK17 Spring Boot 3.0.2 功能 1.内网…

算法day12

算法day12 二叉树理论基础114 二叉树的前序遍历145 二叉树的后序遍历94 二叉树的中序遍历迭代法 二叉树理论基础 直接看代码随想录就完事了,之前考研也学过,大概都能理解 我这里就说说代码层面的。 二叉树的存储: 1、链式存储:这…

基础面试题整理6之Redis

1.Redis的应用场景 Redis支持类型:String、hash、set、zset、list String类型 hash类型 set类型 zset类型 list类型 一般用作缓存,例如 如何同时操作同一功能 2.redis是单线程 Redis服务端(数据操作)是单线程,所以Redis是并发安全的,因…

Mysql MGR搭建

一、架构说明 1.1 架构概述 MGR(单主)VIP架构是一种分布式数据库架构,其中数据库系统采用单主复制模式, 同时引入虚拟IP(VIP)来提高可用性和可扩展性。 这种架构结合了传统主从复制和虚拟IP技术的优势,为数据库系统提供了高可用、 高性能和…

十分钟GIS——geoserver+postgis+udig从零开始发布地图服务

1数据库部署 1.1PostgreSql安装 下载到安装文件后(postgresql-9.2.19-1-windows-x64.exe),双击安装。 指定安装目录,如下图所示 指定数据库文件存放目录位置,如下图所示 指定数据库访问管理员密码,如下图所…

uniapp canvas游标卡尺效果

效果 根据公司业务仿照写的效果。原项目从微信小程序转uniapp,未测试该效果在android端效果。 uniapp直接使用canvas不可做子组件,否则无效果显示,其次显示时要考虑页面渲染超时的问题。 如效果所见,可以设置取值精度。 gitee地址:project_practice: 项目练习 - Gitee.…

用python编写爬虫,爬取房产信息

题目 报告要求 工程报告链接放在这里 https://download.csdn.net/download/Samature/88816284使用 1.安装jupyter notebook 2.用jupyter notebook打开工程里的ipynb文件,再run all就行 注意事项 可能遇到的bug 暂无,有的话私信我

Java 中使用多线程的方式有哪些

在 Java 中,使用多线程主要有以下几种方式: 实现 Runnable 接口:这是实现多线程的一种方式。一个类实现 Runnable 接口后,就意味着它是一个线程的执行对象。当一个线程启动时,需要一个与之关联的 Runnable 对象。 publ…

Netflix Mac(奈飞mac客户端) v2.13.0激活版

Clicker for Netflix Mac版是一款适用于Mac的最佳独立Netflix播放器,具有直接从从Dock启动Netflix,从触摸栏控制Netflix,支持画中画等多种功能,让你拥有更好的观看体验。 软件特色 •直接从Dock启动Netflix •从触摸栏控制Netflix…

每日一练:LeeCode-112、路径总和【二叉树+DFS+回溯】

本文是力扣LeeCode-112、路径总和 学习与理解过程,本文仅做学习之用,对本题感兴趣的小伙伴可以出门左拐LeeCode。 给你二叉树的根节点 root 和一个表示目标和的整数 targetSum 。判断该树中是否存在 根节点到叶子节点 的路径,这条路径上所有…

HarmonyOS4.0——IPC与RPC通信

基本概念 IPC(Inter-Process Communication)与RPC(Remote Procedure Call)用于实现跨进程通信,不同的是前者使用Binder驱动,用于设备内的跨进程通信,后者使用软总线驱动,用于跨设备…

【iOS ARKit】人形遮挡

人形遮挡简介 在 AR系统中,计算机通过对设备摄像头采集的图像进行视觉处理和组织,建立起实景空间,然后将生成的虚拟对象依据几何一致性原理嵌入到实景空间中,形成虚实融合的增强现实环境,再输出到显示系统中呈现给使用…

【数据结构】链表OJ面试题3(题库+解析)

1.前言 前五题在这http://t.csdnimg.cn/UeggB 后三题在这http://t.csdnimg.cn/gbohQ 记录每天的刷题,继续坚持! 2.OJ题目训练 9. 给定一个链表,判断链表中是否有环。 力扣(LeetCode)官网 - 全球极客挚爱的技术成…

假期最好的安排:读书学习成长

假期是每个人放松身心、充电学习的好时机。然而,很多人往往会将假期用于休闲娱乐,错失了充实自己的宝贵机会。本文将介绍如何通过读书学习成长,让你度过一个充实、有意义的假期。 一、知识拓展 假期是知识拓展的好时机。你可以选择一些与你…

嵌入式中《C++之旅》阅读笔记

constexpr constexpr的隐含意思是在编译阶段求值,对于一些求值操作,如果声明为constexpr,那么会编译器会尝试在编译阶段进行计算求值,如果求值成功,则用结果进行替换。 一个常用的例子是如下: constexpr…

深入解析 Spring 事务机制

当构建复杂的企业级应用程序时,数据一致性和可靠性是至关重要的。Spring 框架提供了强大而灵活的事务管理机制,成为开发者处理事务的首选工具。本文将深入探讨 Spring 事务的使用和原理,为大家提供全面的了解和实际应用的指导。 本文概览 首…