encodeURI(JSON.stringify()) 在 URL 中显示 %255B

Question

我试图在 Angular 中传递一个 queryParam，它由一个对象数组 fooArray = [{foo: 'bar', foo: false}, {foo: 'bar', foo: false}] 组成。在 URL queryParam 中，我收到以下内容：使用 encodeURI(JSON.stringify(this.fooArray))

时的 %255B

我尝试使用 encodeURI(JSON.stringify()) 将数组编码为 queryParam 并使用 JSON.parse(decodeURIComponent()) 检索参数

fooArray = [{foo: 'bar', foo: false}, {foo: 'bar', foo: false}]

fooParam: encodeURI(JSON.stringify(this.fooArray))

JSON.parse(decodeURIComponent(params["fooParam"]))

Answer 1

您正在对 URL 进行双重编码。这个：

encodeURI(JSON.stringify([{foo: 'bar', foo: false}, {foo: 'bar', foo: false}]))

结果

"%5B%7B%22foo%22:false%7D,%7B%22foo%22:false%7D%5D"

如果你再次调用 encodeURI，你会得到

"%255B%257B%2522foo%2522:false%257D,%257B%2522foo%2522:false%257D%255D"

...因为 % 被编码为 %25.

两个注意事项：

你应该只编码一次。也许您正在将字符串传递给已经为您进行 URI 编码的东西？如果是这样，请不要使用 encodeURI.
通常，您需要 encodeURIComponent，而不是 encodeURI（因为通常您只编码 hte URI 的一部分，而不是整个内容）。

Answer 2

我运行正在解决这个问题，我发现在我的代码链的某个地方，我运行正在 .toString()，运行在我的 string/url 上 encodeURI。

我实际上是在不知不觉中对我的搜索参数进行了双重编码。如果您在 URL or URLSearchParams class 的实例上运行ning .toString()，那么您不需要手动运行 encodeURI 或 encodeURIComponent

双重编码测试

了解您是否对字符串进行双重编码的一种快速方法是在您的 javascript 开发人员工具中设置一个快速示例测试运行。可视化这对我有很大帮助：

const searchParams1 = '?status=open&created_by=bobby&date';
const url1 = "http://example.com/" + searchParams1;
const searchParamsString1 = new URL(exampl1).toString() // NOTE: `toString()` runs encode on the string for you!

const searchParams2 = '?status=open&date_filter={"by":"created","qualifier":"between","value":["2022/04/01","2022/04/02"]}';
const example2 = "http://example.com/" + searchParams2;
const searchParamsString2 = new URL(example2).toString();

// encoded 1x
searchParamsString2 ===
  "http://example.com/?status=open&date_filter={%22by%22:%22created%22,%22qualifier%22:%22between%22,%22value%22:[%222022/04/01%22,%222022/04/02%22]}";

// encoded 2x (visual)
const example2DoubleEncoded = encodeURI(
  "http://example.com/?status=open&date_filter={%22by%22:%22created%22,%22qualifier%22:%22between%22,%22value%22:[%222022/04/01%22,%222022/04/02%22]}"
);
example2DoubleEncoded ==="http://example.com/?status=open&date_filter=%7B%2522by%2522:%2522created%2522,%2522qualifier%2522:%2522between%2522,%2522value%2522:%5B%25222022/04/01%2522,%25222022/04/02%2522%5D%7D";

encodeURI(JSON.stringify()) 在 URL 中显示 %255B

encodeURI(JSON.stringify()) showing %255B in URL

javascript

urlencode

encodeuricomponent

query-parameters

双重编码测试