React Native iOS端Fetch API仅URL分号未编码问题

问题分析 #

你在React Native iOS端使用Fetch API发起请求时，URL中的分号(;)未被自动编码，手动编码又会触发Fetch二次编码（把%转为%25），导致服务器无法识别正确参数。这是因为Fetch默认将分号视为URL查询参数的合法分隔符，不会对其编码，但你的服务器要求必须把分号转为%3B。

可行解决方案 #

用URL对象搭配URLSearchParams构造请求URL，这种方式会自动按规范编码所有需要转义的字符（包括分号），且不会被Fetch二次编码。

代码示例

// 初始化基础URL
const baseUrl = new URL('https://example.testing.com/');

// 设置查询参数，URLSearchParams自动编码特殊字符
baseUrl.searchParams.set('filterString', 'product.code><CODE01;CODE02');

// 转换为最终请求URL
const url = baseUrl.toString();

// 发起请求
const response = await fetch(url, { method, headers });

// 验证编码结果
const responseURL = response.url;
console.log('displayUrl: ' + responseURL);

执行后生成的URL会符合服务器要求：

https://example.testing.com/?filterString=product.code%3E%3CCODE01%3BCODE02

方案有效性说明 #

URLSearchParams会严格遵循URL编码规范处理参数值，将分号、大于号、小于号等特殊字符全部转为对应编码格式，Fetch识别到这是合法的编码URL后，不会再进行二次编码。

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