使用encodeURIComponent编码参数后服务端未收到id参数的问题排查

算力阿峰

2026-7-23

问题：使用encodeURIComponent后服务端无法接收id参数？

我编写了如下代码，使用encodeURIComponent处理请求参数：

export function getDownloadFileUrl(fid: string,bgColor: string) {
    const params = encodeURIComponent("id=" + Number(fid) + "&bgColor=" + bgColor);
    const config = {
        method: 'get',
        url: '/snap/photo/download?' + params,
    };
    const actionTypeString: string = FileActionType[FileActionType.DOWNLOAD_FILE];
    return requestWithActionType(config, actionTypeString, store);
}

但服务端显示无法接收到id参数（id参数缺失）。我查阅文档得知encodeURIComponent用于编码参数，想请教我是否遗漏了什么？该如何修复这个问题？encodeURIComponent是否仅需对参数值进行编码？

解答

核心问题：你错误地把**整个参数字符串（包括id=、&bgColor=这类分隔符）**都用encodeURIComponent编码了。编码后，&和=会被转义成%26和%3D，服务端解析URL时，会把这一整串编码后的内容当成一个完整的参数片段，无法识别出id和bgColor两个独立参数，因此收不到id。
正确用法：encodeURIComponent只需要对每个参数的值单独编码，参数名（id、bgColor）和分隔符（&、=）保持原样即可。

修复后的代码示例：

export function getDownloadFileUrl(fid: string, bgColor: string) {
    // 单独编码每个参数值
    const encodedId = encodeURIComponent(Number(fid));
    const encodedBgColor = encodeURIComponent(bgColor);
    // 拼接成正常的参数字符串
    const params = `id=${encodedId}&bgColor=${encodedBgColor}`;
    const config = {
        method: 'get',
        url: '/snap/photo/download?' + params,
    };
    const actionTypeString: string = FileActionType[FileActionType.DOWNLOAD_FILE];
    return requestWithActionType(config, actionTypeString, store);
}