Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.
And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.
URL query string value encoding
See original GitHub issue🐞 bug report
Affected Package
The issue is caused by package @angular/....@angular/common/http
Is this a regression?
Yes, the previous version in which this bug was not present was: ....I am not sure, I did not check.
Description
A clear and concise description of the problem...If we pass data in query string in GET method with param value of HTTP PARAMS, by default it is not converting ‘@’ symbol to %40 or any other reserved symbol with is corresponding UTF-8 code. It should convert ‘@’ to %40, because of this I am not able to use http get with querystring. eg, http://localhost:4200/api/usersData?userName=xxx.xxx@xxx.com&password=xxx@xxx above request is failing.
Expected / new behavior:
function standardEncoding(v: string): string { return encodeURIComponent(v) .replace(/%40/gi, ‘@’) .replace(/%3A/gi, '😂 .replace(/%24/gi, ‘$’) .replace(/%2C/gi, ‘,’) .replace(/%3B/gi, ‘;’) .replace(/%2B/gi, ‘+’) .replace(/%3D/gi, ‘=’) .replace(/%3F/gi, ‘?’) .replace(/%2F/gi, ‘/’); }
this code is not able to convert @ to %40. It should do that. If is write replace(‘@’, ‘%40’) then it is working.
Minimal reproduction of the problem with instructions:
Below mentioned code is the service code which is making a GET request with query string.
data passed is, userName = xxx@xxx.com password = pwd@#
const options = { headers: new HttpHeaders({ ‘Content-Type’: ‘application/json’, }), observe: ‘response’ as ‘body’, params: null, reportProgress: true, responseType: ‘json’ as ‘json’, withCredentials: true };
@Injectable({ providedIn: ‘root’ }) export class AuthenticationService {
constructor(private http: HttpClient) { }
// login user login(requestParam: { userName: string, password: string }): Observable<HttpResponse> { options.headers = options.headers.set(‘Content-Type’, ‘application/x-www-form-urlencoded’); options.params = new HttpParams({ fromObject: requestParam, encoder: this.httpParameterCodec }); console.log(options.params); return this.http.get<HttpResponse<Observable>> (${environment.API_URL}usersData, options) .pipe( // retry(3), catchError(this.handleError) ); }
🔬 Minimal Reproduction
https://stackblitz.com/...I am using In-Memory-Api for processing the report, then I am sent the queryString like ?userName=xxx@xxx.com&password=xxxx@xx @, $ etc are not processing the request.
🔥 Exception or Error
http://localhost:4200/api/usersData?userName=bc@abc&password=abc 404 (Not Found) Server error respose code: 404 Body was: <!DOCTYPE html>
<html lang="en"> <head> <meta charset="utf-8"> <title>Error</title> </head> <body>Cannot GET /api/usersData</body> </html>
🌍 Your Environment
Angular Version:
Angular CLI: 7.3.8 Node: 10.15.3 OS: win32 x64 Angular: 7.2.13 … animations, common, compiler, compiler-cli, core, forms … language-service, platform-browser, platform-browser-dynamic … router
Package Version
@angular-devkit/architect 0.13.8 @angular-devkit/build-angular 0.13.8 @angular-devkit/build-optimizer 0.13.8 @angular-devkit/build-webpack 0.13.8 @angular-devkit/core 7.3.8 @angular-devkit/schematics 7.3.8 @angular/cli 7.3.8 @ngtools/webpack 7.3.8 @schematics/angular 7.3.8 @schematics/update 0.13.8 rxjs 6.3.3 typescript 3.2.4 webpack 4.29.0
Anything else relevant?
Issue Analytics
- State:
- Created 4 years ago
- Comments:11 (3 by maintainers)
Top Results From Across the Web
Top Related Medium Post
Top Related StackOverflow Question
Troubleshoot Live Code
Top Related Reddit Thread
Top Related Hackernoon Post
Top Related Tweet
Top Related Dev.to Post
Top Related Hashnode Post
Why does the default HTTP encoder use standardEncoding (which does not encode special characters like
;) to encode keys and values instead of just encodeURIComponent? If you have an object that is{"key": "value;with+characters"}shoudn’t this be encoded tokey=value%3Bwith%2Bcharactersas opposed tokey=value;with+characters, as the latter seems very likely to be misinterpreted by the web server when it tries to parse the query string? I get that for encoding URIs in general, the semicolon is an acceptable character and should not be encoded, hence the existence ofstandardEncodingbut when encoding keys and values of params, you clearly don’t want to have special characters left alone that might affect how the query string gets parsed…EDIT: I guess my question is this issue https://github.com/angular/angular/issues/18261
I’m also seeing encoding issues on Angular 7.2.5:
Output:
This is preventing us from downloading some files from our backend due to bad URL escaping