'Angular send data via POST as x-www-form-urlencoded --data-urlencode

In my angular app login endpoint curl has mentioned bellow

curl 'http://localhost:3200/oauth/token' \
  -H 'Connection: keep-alive' \
  -H 'sec-ch-ua: " Not A;Brand";v="99", "Chromium";v="98", "Google Chrome";v="98"' \
  -H 'DNT: 1' \
  -H 'sec-ch-ua-mobile: ?0' \
  -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/98.0.4758.102 Safari/537.36' \
  -H 'Content-Type: application/x-www-form-urlencoded' \
  -H 'Accept: application/json, text/plain, */*' \
  -H 'application: connect-web' \
  -H 'sec-ch-ua-platform: "macOS"' \
  -H 'Origin: http://localhost:4200' \
  -H 'Sec-Fetch-Site: same-site' \
  -H 'Sec-Fetch-Mode: cors' \
  -H 'Sec-Fetch-Dest: empty' \
  -H 'Referer: http://localhost:4200/' \
  -H 'Accept-Language: en-GB,en-US;q=0.9,en;q=0.8' \
  --data-raw 'username=username&password=123456&grant_type=password&client_id=connect&scope=openid' \
  --compressed

But client need it as bellow

curl --location --request POST 'http://localhost:3200/oauth20/token' \
--header 'Content-Type: application/x-www-form-urlencoded' \
--data-urlencode 'grant_type=password' \
--data-urlencode 'client_id=connect' \
--data-urlencode 'scope=openid' \
--data-urlencode 'username=username' \
--data-urlencode 'password=12345'

My angular implementation as follow

authUser(username: string, password: string): Observable<IAuthResponse> {
    const headers = new HttpHeaders({
      'Content-Type': 'application/x-www-form-urlencoded',
      application: 'connect-web'
    });
    const options = { headers };

    const payload = new HttpParams()
      .set('username', username)
      .set('password', password)
      .set('grant_type','password)
      .set('client_id', clientId)
      .set('scope', scope);

    return this.httpClient.post<IAuthResponse>(`${loginEndpointBaseUrl}/oauth/token`, payload, options);
  }

My question is I need to send post method body as set of --data-urlencode not like --data-raw



Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source