http调用中querystring中的双引号

Question

我使用第三方API，并将这样的查询传递到url:的末尾

?query="status:2 OR status:3"

当我在邮递员中执行Get请求时，这适用于

在angular中，我试图让api调用工作，但我不确定如何工作。

我试过这个

q = 'query="'+ encodeURI(filterQuery)+'"';
let url = `${this.apiUrl}/api/?${q}`;
return this.httpClient.get<Item[]>(url, this.httpOptions);

这是一个糟糕的请求，我认为它正在对双引号执行一些额外的编码在铬中看起来像这样

?query=%22status:2%20OR%20status:3%22

编辑：

我怀疑http客户端正在进行编码。它也不适用于此：

let url = `${this.apiUrl}/api/?query="status:2 OR status:3"`;
return this.httpClient.get<Item[]>(url, this.httpOptions);

同样来自api文档：

查询必须是URL编码的

查询字符串必须包含在一对双引号之间，并且最多可以有512个字符的

Answer 1

使用angular HTTP客户端，您实际上不需要自己构建URL(如果您这样做了，我建议您再次使用URLSearchParametersAPI，而不是自己构建，但由于您使用的是angular，请忘记这一点(。正如这里所解释的，您可以简单地在options中传递params，它将为您构建查询。

在你的情况下，这将是：

return this.http.get<Item[]>(
`${this.apiUrl}/api/`,
{ params: { query: filterQuery }},
);

此外，没有query=%22status:2%20OR%20status:3%22是正确的，因为当您通过decodeURIComponent:运行它时，它会产生正确的字符串

console.log(decodeURIComponent("query=%22status:2%20OR%20status:3%22"));

我首先建议您尝试删除路径末尾的额外/(如果规范允许与否，我目前还没有跟上速度，但这似乎不常见(。

"/api/?query="status:2 OR status:3"
^
| This here

根据：https://www.rfc-editor.org/rfc/rfc3986#section-6.2.3

当分隔符的关联组件为空时，规范化不应删除分隔符，除非方案规范允许这样做。例如；http://example.com/?"不能被认为等同于上面的任何示例。

如果MY对此的解释是正确的，则尾部斜线将(可能(导致路径组件中出现一个空条目，从而(可能(引起不同的行为。

如果这不起作用，你可能应该告诉"；第三方"；，他们的API不起作用😅.

如果你想进一步调试它，我建议从"；"网络"；选项卡。然后将其放入

fetch(<your url here>)
.then(r => r.json())
// or .then(r => r.text()) depending on what data is expected
.then(console.log);

并修改URL直到其工作。如果有效的话，你可以调整你的角度代码，这样它就会给你匹配的输出。