如何让fetch()不将URL中的%2E解码为点号(.)？

• 二次编码%2E为%252E
  fetch会自动解码URL中的百分号编码字符，所以可以提前把%2E二次编码成%252E（即把%再编码一次）。这样fetch解码后，原本的%252E会变回%2E，正好符合后端路由的要求。示例代码：

  // 原始需要保留的编码IP
  const targetIp = '192%2E168%2E1%2E1';
  // 二次编码%2E
  const doubleEncodedIp = targetIp.replace(/%2E/g, '%252E');
  // 发起请求
  fetch(`/foo/bar/${doubleEncodedIp}.json`)
    .then(res => res.json())
    .catch(err => console.error(err));
  

• 将编码内容放入请求体而非URL
  把原本放在URL路径里的编码内容转移到请求body中，后端从请求体读取参数后再处理逻辑，完全绕开URL编码的问题。示例代码：

  fetch('/foo/bar/get-data.json', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json'
    },
    body: JSON.stringify({ encodedIp: '192%2E168%2E1%2E1' })
  })
    .then(res => res.json())
    .catch(err => console.error(err));
  

  后端只需解析请求体中的encodedIp字段，即可获取到保留编码的内容。

• 调整后端路由适配解码后的URL
  如果前端修改成本较高，可以直接调整后端路由规则，让其能匹配解码后的路径（如/foo/bar/192.168.1.1.json），或者在后端接收请求时，将路径中的点号重新编码为%2E再匹配原有逻辑。以Node.js Express为例：

  app.get('/foo/bar/:ip.json', (req, res) => {
    // 将路径中的点号重新编码为%2E
    const encodedIp = req.params.ip.replace(/\./g, '%2E');
    // 使用encodedIp执行原有业务逻辑
    // ...
    res.send('处理结果');
  });
  

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