如何在 Angular 7 中对包含特殊字符的查询参数进行编码？

Posted 2023-02-22

【中文标题】如何在 Angular 7 中对包含特殊字符的查询参数进行编码？

【英文标题】：How to encode query params containing special characters in Angular 7?

【发布时间】：2019-08-26 17:43:03

【问题描述】：

我正在尝试在 Angular 7 中编码查询参数值。但是当我的查询参数值包含任何特殊字符时，我得到 400 Bad Request 状态代码

失败的请求网址： http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE

但是，当我的查询参数值不包含任何特殊字符时，我得到 200 OK 状态代码。

成功的请求网址： http://localhost/api/67/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE

预期的请求 url 必须像 http://localhost/cardvalues?parentcardvalues=VALUE1&parentcardvalues=VALUE2

下面是我的代码，

parentcardvalues=["STONE","STONE AGE"]

let myparams = new HttpParams();

    if(parentcardvalues.length != 0)
       parentcardvalues.forEach((value) =>  

myparams = myparams.append( 'parentcardvalues',   encodeURIComponent(value) );

);

 this.http.get(this.baseUrl + 'api/67/cardvalues', params: myparams);

Swagger 规范是，

卷曲

curl -X GET "http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE" -H  "accept: application/json"

请求网址

http://localhost/api/cardvalues?parentcardvalues=STONE&parentcardvalues=STONE%20AGE

【问题讨论】：

如果你使用params，我怀疑你必须拥有?...

@HereticMonkey 谢谢，删除多余的“？”后我仍然遇到同样的错误。我想知道是否需要使用请求标头设置一些选项

听起来像是后端问题。使用%20 空间是uri 编码标准

【参考方案1】：

您可以使用以下方法解码您的参数：

decodeURIComponent(encodedURI_string)

更多信息here

【参考方案2】：

同意，您可以对 urlserializer 中字符的 urls 问题进行一般更改： https://angular.io/api/router/DefaultUrlSerializer https://angular.io/api/router/UrlSerializer

您可以在 app.module.ts 中覆盖它（提供：..,..） 你可以看到这个： Angular 2 - Implement UrlSerializer

问候