axios调接口传参特殊字符丢失的问题(encodeURI 和 encodeURIComponent)

news2024/11/23 17:21:00

1、axios调接口特殊字符丢失的问题

项目开发过程中遇到一个接口传参,参数带特殊字符,axios调接口特殊字符丢失的问题

例如接口:

get/user/detail/{name}

name是个参数直接调接口的时候拼到接口上,get/user/detail/test123#$%,调接口发现后面的特殊字符#$%丢失了,调的接口变成了get/user/detail/test123

2、解决办法:

参数使用encodeURIComponent编译一下,再拼到接口上,这样特殊字符不会丢失,后端可以正常接收参数。

import Axios from 'src/axios/index.js';

     
const name = 'test123#$%';

// 直接拼接口上
Axios.get(`get/user/detail/${name}`).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 参数使用encodeURIComponent编译一下,再拼接口上
Axios.get(`get/user/detail/${encodeURIComponent(name)}`).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 直接拼接口上

// 参数使用encodeURIComponent编译一下,再拼接口上

3、延伸

使用params传参,如果直接将参数使用?拼接到后面,也是会存在特殊字符丢失的问题

import Axios from 'src/axios/index.js';
const name = 'test123#$%';

// 直接拼接口上
Axios({
    url: `get/user/detail?name=${name}`,
    method: 'get',
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 参数使用encodeURIComponent编译一下,再拼接口上
Axios({
    url: `get/user/detail?name=${encodeURIComponent(name)}`,
    method: 'get',
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 正常逻辑传参数,推荐
Axios({
    url: 'get/user/detail',
    method: 'get',
    params: { name },
}).then(function (response) {
    console.log(response);
}).catch(function (error) {
    console.log(error);
});

// 直接拼接口上

// 参数使用encodeURIComponent编译一下,再拼接口上

// 正常逻辑传参数,推荐

4、encodeURI 和 encodeURIComponent

MDN上关于encodeURI 和 encodeURIComponent的介绍

encodeURI() - JavaScript | MDN

encodeURIComponent() - JavaScript | MDN

encodeURIComponent不转义的字符包括:

类型包含
非转义的字符字母 数字 - _ . ! ~ * ' ( )

encodeURI不转义的字符包括:

类型包含
保留字符; , / ? : @ & = + $
非转义的字符字母 数字 - _ . ! ~ * ' ( )
数字符号#

5、解码

encodeURI使用decodeURI解码,encodeURIComponent使用decodeURIComponent 解码
 

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

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

相关文章

记一次Java内存溢出导致程序宕机的问题及排查

Hi, I’m Shendi 记一次Java内存溢出导致程序宕机的问题及排查 问题场景 今天在使用工具中的 word 转 pdf 出了问题,报502错误,打开服务器发现服务被关闭了,起初以为是误关,打开后重新转换又出现了这个问题,在项目文件…

微信机器人接口开发

简要描述: 设置http回调地址 请求URL: http://域名地址/setHttpCallbackUrl POST 请求头Headers:(别忘了传) Content-Type:application/jsonAuthorization:login接口返回 参数: 参数名必…

【尘缘送书第五期】Java程序员:学习与使用多线程

目录 1 多线程对于Java的意义2 为什么Java工程师必须掌握多线程3 Java多线程使用方式4 如何学好Java多线程5 参与方式 摘要:互联网的每一个角落,无论是大型电商平台的秒杀活动,社交平台的实时消息推送,还是在线视频平台的流量洪峰…

【Java 基础】23 国际化

文章目录 1.概念2.原理1)Locale2)ResourceBundle3)MessageFormat 3.例子1)准备资源文件2)加载资源文件3)格式化消息(非必须) 总结 在全球化的今天,开发支持多语言的应用变…

配置BFD状态与接口状态联动示例

1、BFD检测IP链路。 在IP链路上建立BFD会话,利用BFD检测机制快速检测故障。BFD检测IP链路支持单跳检测和多跳检测: BFD单跳检测是指对两个直连系统进行IP连通性检测,“单跳”是IP链路的一跳。 BFD多跳检测是指BFD可以检测两个系统间的任意路…

每日一练:插入排序

1. 概念及原理 插入排序是一种简单直观的排序算法,其基本思想是将一个元素插入到已经排序好的部分,然后不断地重复这个过程,直到整个数组有序。下面是插入排序的算法原理: 初始状态: 数组被分为已排序和未排序两个部分…

论文阅读——Deformable ConvNets v2

论文:https://arxiv.org/pdf/1811.11168.pdf 代码:https://github.com/chengdazhi/Deformable-Convolution-V2-PyTorch 1. 介绍 可变形卷积能够很好地学习到发生形变的物体,但是论文观察到当尽管比普通卷积网络能够更适应物体形变&#xff…

Python中如何判断List中是否包含某个元素

更多资料获取 📚 个人网站:ipengtao.com 在Python中,判断一个列表(List)是否包含某个特定元素是常见的任务之一。在本文中,将深入探讨多种判断List成员包含性的方法,并提供丰富的示例代码&…

Scratch少儿编程系统开发时案例验证的必要性

scratch少儿编程[1] 随着少儿编程教育的普及,越来越多的公司和集成商开始关注scratch少儿编程系统的二次开发。scratch是一个由麻省理工学院媒体实验室开发的免费、开源的少儿编程软件。它具有易用、趣味性强、可扩展性强等特点,非常适合少儿编程教育。…

产品成本收集器流程演示

感谢大佬的文章,我只是一个翻译搬运工,原文地址:产品成本收集器 概述 SAP 令人兴奋的部分之一是它在不同操作模块之间的集成程度。使用产品成本收集器来跟踪生产就是一个很好的例子。在本博客中,我计划遵循产品成本收集器流程&a…

分享一个微信红包封面过审方法

大家好,我是小悟 兄弟们,已经12月份了,今年的最后一个月,距离过年还有两个月左右,如果你需要制作微信红包封面,我建议你现在就可以着手了。 一方面,临近春节,会有很多人在制作红包封…

[b01lers2020]Life on Mars 一个接口的sql schema.schemate表

这里还是很简单的 啥也没有 然后抓包看看 发现传递参数 直接尝试sql 然后如果正确就会返回值 否则 返回1 chryse_planitia union select database(),version() 发现回显 直接开始注入 chryse_planitia union select database(),version()chryse_planitia union select data…

ESP32-Web-Server编程- 在 Web 上开发动态纪念册

ESP32-Web-Server编程- 在 Web 上开发动态纪念册 概述 Web 有很多有趣的玩法,在打开网页的同时送她一个惊喜。 需求及功能解析 本节演示在 ESP32 上部署一个 Web,当打开对应的网页时,将运行动态的网页内容,显示炫酷的纪念贺词…

linux学习之详解文件

目录 1.先认识文件 2.c语言中常用文件接口 fopen(打开文件) 3.系统接口操作文件 open write 文件的返回值以及打开文件的本质 理解struct_file内核对象 了解文件描述符(fd)分配规则 重定向 dup接口 标准错误流 文件缓冲…

【项目问题解决】IDEA2020.3 使用 lombok 插件 java: 找不到符号 符号: 方法 builder()

目录 lombok找不到符号问题修改 1.问题描述2.问题原因3.解决思路4.解决方案5.总结6.参考 文章所属专区 项目问题解决 1.问题描述 IDEA2020.3 使用 lombok 插件 java: 找不到符号 符号: 方法 builder(),无法使用lombok下应有的注解,一度怀疑是版本问题 …

二十一章(网络通信)

计算机网络实现了多台计算机间的互联,使得它们彼此之间能够进行数据交流。网络应用程序就是在已连接的不同计算机上运行的程序,这些程序借助于网络协议,相互之间可以交换数据。编写网络应用程序前,首先必须明确所要使用的网络协议…

hive映射es表任务失败,无错误日志一直报Task Transitioned from NEW to SCHEDULED

一、背景 要利用gpt产生的存放在es种的日志表做统计分析,通过hive建es的映射表,将es的数据拉到hive里面。 在最初的时候同事写的是全量拉取,某一天突然任务报错,但是没有错误日志一直报:Task Transitioned from NEW t…

MySQL数据库从小白到入门(二)

多表关系: 项目开发中,在进行数据库表结构设计时,会根据业务需求及业务模块之间的关系,分析并设计表结构。由于业务之间相互关联,所以各个表结构之间也存在着各种联系,基本上分为三种。 外键: 创…

JavaSE基础50题:11. 输出一个整数的每一位

概述 输出一个整数的每一位。 如:1234的每一位是4,3,2,1 。 个位:1234 % 10 4 十位:1234 / 10 123 123 % 10 3 百位:123 / 10 12 12 % 10 2 千位: 12 / 10 1 代码 ublic sta…

LinuxBasicsForHackers笔记 -- 管理用户环境变量

查看和修改环境变量 env – 您可以通过从任何目录在终端中输入 env 来查看所有默认环境变量。环境变量的名称始终为大写,如 HOME、PATH、SHELL 等。 查看所有环境变量 set – 查看所有环境变量,包括 shell 变量、局部变量和 shell 函数(例…