JavaScript传特殊字符请求报URI malformed错误解决方法

触发URI malformed 500错误的核心原因是编解码层级错位，不是encodeURIComponent本身能力不足：

• 手动拼接URL字符串传入fetch时，fetch会自动对URL中的特殊字符做二次编码，提前手动调用encodeURIComponent会导致编码结果被重复处理，最终传到后端的参数中出现孤立%或不符合百分号编码规则的序列，Node.js端调用decodeURIComponent时直接抛出异常
• 多数Node.js Web框架（Express、Koa等）的默认query解析逻辑会自动对参数做一次decodeURIComponent，如果业务代码中再次手动调用解码方法，遇到带%的字符就会触发解码失败，或者出现多重编码导致的%2525异常结果
• encodeURI的设计目标是编码完整URL，不会转义URL结构保留字（&、+、?等），本身就不适合处理query参数值，自然无法解决问题

前端侧（优先修改，覆盖90%以上场景） #

放弃手动拼接query字符串的写法，直接用浏览器原生URL+URLSearchParamsAPI处理参数，从根源规避二次编码问题，替换原有代码如下：

const url = new URL(endpoint);
// append方法自动按RFC规范完成参数编码，覆盖所有特殊字符
url.searchParams.append('text', query);
// 直接传入URL对象，fetch不会做额外二次编码
await fetch(url);

注意：不需要再对传给append的参数值额外套encodeURIComponent，URLSearchParams已经完成了符合标准的编码处理，包括你提到的!@#$%^&*()_+全量特殊字符，不会出现漏转义问题。

后端侧（兜底容错，避免直接抛500） #

不要依赖框架默认的无容错解码逻辑，增加异常捕获，遇到畸形编码时做降级处理，不要直接中断请求返回500，以Express框架为例：

// 替换默认query解析器
app.set('query parser', (queryStr) => {
  const result = {};
  new URLSearchParams(queryStr).forEach((val, key) => {
    try {
      result[key] = decodeURIComponent(val);
    } catch (err) {
      // 解码失败时直接返回原值，不抛出异常
      result[key] = val;
    }
  });
  return result;
});

如果是Koa或其他框架，逻辑同理：所有手动调用decodeURIComponent的位置必须包裹try/catch，不要假设传入参数永远是合法编码格式。

• 手动拼接字符串+encodeURIComponent的写法，会被fetch自动二次编码，导致前后端编解码层级不匹配
• 手动替换%字符的方式属于补丁式逻辑，每多一次编码/解码流程就会多一层%25前缀，最终必然出现多重编码的%2525问题
• encodeURI使用场景错误，本身就不会转义query参数中需要编码的保留字，无法处理参数值中的特殊字符

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