ReactJS应用中URL参数重复编码问题咨询及解决方法

你的观察完全合理 #

出现重复编码的原因有两点：

1. URLSearchParams.set()方法会自动对传入的参数值执行URL编码。如果origin本身已经是编码后的字符串，再次调用set()会把已编码的特殊字符（比如%）再次编码，导致重复编码。
2. 当你把service这个URL对象直接传给finalUrl.searchParams.set()时，会自动调用service.toString()返回已编码的完整URL；而finalUrl的set()又会对这个字符串再次编码，进一步加剧重复编码问题。

避免重复编码的解决方法 #

核心原则：所有传入URLSearchParams.set()的参数值，都应该是未编码的原始值，让URLSearchParams自动处理编码逻辑，保证编码只执行一次。

1. 处理origin参数 #

如果origin是从查询字符串中直接截取的编码值（而非通过URLSearchParams.get()获取的解码值），先对其解码：

// 解码已编码的origin，得到原始URL
const decodedOrigin = decodeURIComponent(origin);
let service = new URL(`/${accessRoute}`, this.authOriginService);
service.searchParams.set('origin', decodedOrigin);
service.searchParams.set('id', id);

如果你是通过URLSearchParams.get('origin')获取的origin，它已经是解码后的原始值，直接传入set()即可。

2. 处理service参数 #

不要直接传入service URL对象，先解码其已编码的URL字符串，再传入set()：

const finalUrl = new URL(mainService);
finalUrl.searchParams.set('id', id);
// 解码service的href后传入，避免重复编码
finalUrl.searchParams.set('service', decodeURIComponent(service.href));

完整修正代码 #

// 确保origin为未编码原始值，若已编码则先解码
const decodedOrigin = typeof origin === 'string' ? decodeURIComponent(origin) : origin;
let service = new URL(`/${accessRoute}`, this.authOriginService);
service.searchParams.set('origin', decodedOrigin);
service.searchParams.set('id', id);

const finalUrl = new URL(mainService);
finalUrl.searchParams.set('id', id);
// 解码service的href后作为参数传入
finalUrl.searchParams.set('service', decodeURIComponent(service.href));

内容的提问来源于stack exchange，提问作者Safari