2023-01-10 工作记录-JS-解决用&拼接参数传递到后端后变成了两个参数

小呀小萝卜儿

已于 2023-02-13 09:54:27 修改

阅读量348

点赞数 4

分类专栏：工作文章标签： javascript 前端开发语言

于 2023-02-12 10:15:00 首次发布

本文链接：https://blog.csdn.net/weixin_48850734/article/details/128974098

版权

工作专栏收录该内容

119 篇文章 7 订阅

订阅专栏

在前端开发中，使用&拼接URL参数可能导致在传递到后端时被解析成多个参数。解决方法是使用encodeURIComponent对包含特殊字符的参数进行编码，确保它们作为单一参数正确传递。这样可以保证像邀请码这样的信息在登录接口调用中不被错误解析。

摘要由CSDN通过智能技术生成

`JS`-解决用`&`拼接参数传递到后端后变成了两个参数

最近遇到个项目，需要前端传递一个redirectUrl参数到后端接口里去，其redirectUrl参数的参数值由链接url和邀请码inviteCode拼接而成，我就用&拼接的这两个参数，却发现出现bug：参数传递到后端后变成了两个参数。

一、错误代码：❎

onLogIn = async () => {
	const url = 'http://www.baidu.com'; // 链接
	const shareCode = '123'; // 邀请码
	const redirectUrl = url + '&inviteCode=' + shareCode;
	
	const { data, success } = await API.coop_login({ redirectUrl }); // 请求登录接口，传递参数redirectUrl
	if(data && success) {
		console.log('登录成功');
	}
}

对应结果： 👇🏻

在这里插入图片描述

二、正确代码：✅

解决方法：需要通过encodeURIComponent对该参数进行加密，不然会被当成多个参数传过去。

onLogIn = async () => {
	const url = 'http://www.baidu.com'; // 链接
	const shareCode = '123'; // 邀请码
	const redirectUrl = encodeURIComponent(url + '&inviteCode=' + shareCode);
	
	const { data, success } = await API.coop_login({ redirectUrl }); // 请求登录接口，传递参数redirectUrl
	if(data && success) {
		console.log('登录成功');
	}
}