Http post request on Ionic does not send data as x-www-form-urlencoded

Asked

Viewed 278 times

0

I need to make an http request to log in to my Ionic application, but my function needs to send the data as x-www-form-urlencoded, tried several different ways but still could not.

  public login(credenciais):Observable<any>{

    const formData = new FormData()
    formData.append('email', credenciais.email);
    formData.append('password', credenciais.password);

    return this._http.post<any>(AppSettings.API_ENDPOINT + 'loginnovo',
    formData, {observe: 'response'
    }
  )
}

This way I get:

Http Failure During Parsing

I also tried to:

  public login(credenciais):Observable<any>{


    return this._http.post<any>(AppSettings.API_ENDPOINT + 'loginnovo',
    {email: credenciais.password,
    password: credenciais.password},  
    {observe: 'response'
    }
  )
}

This way I get an Http Failure During Parsing If I check on Request Payload, I have:

{email: "[email protected]", password: "1234"} email : "[email protected]" password : "1234"

ionic angular http-request

  • if you send only the credentials object does not work?

  • I believe that this way it sends as form data, because as return I should receive something in the body, and I get null. When I test for the form-date in Postman, I also get null, when I change to x-www-formurlencoded I receive as a return in the body the email I use to log in, so I suppose I’m still sending as form-data

2 answers

0

The x-www-form-urlencoded must be entered in the header. Try the following:

public login(credenciais):Observable<any>{

    const formData = new FormData()
    formData.append('email', credenciais.email);
    formData.append('password', credenciais.password);

    let headerJson = {
        'Content-Type': 'x-www-form-urlencoded',
    };
    let headers = new HttpHeaders(headerJson);

    return this._http.post<any>(AppSettings.API_ENDPOINT + 'loginnovo',
        JSON.stringify(formData), {headers: this._headers});

}

  • I tried but it drops into the subscribe Else and shows error message. If I put console.log(error) it returns null

  • If you are using the ionic serve --lab, see Inspect - Network if the header is being sent correctly and what is the response to the request. A common problem is error due to preflight.

  • I am using Ionic serve -c, this way that vc posted is not being sent any data in Request Payload, is empty.

  • Also include Content-Type application/json in the header and change to return this._http.post<any>(AppSettings.API_ENDPOINT + 'loginnovo', JSON.stringify({email: credenciais.password, password: credenciais.password}), {headers: this._headers});

  • I changed, but I get: Http Failure During Parsing

  • I saw a possible solution in https://github.com/angular/angular/issues/18396, which is to include responseType: 'text'. return this._http.post<any>(AppSettings.API_ENDPOINT + 'loginnovo', JSON.stringify({email: credenciais.password, password: credenciais.password}), {headers: this._headers, responseType: 'text'});

  • Argument of type '{ headers: Httpheaders; responseType: "text"; }' is not Assignable to Parameter of type '{ headers?: Httpheaders | { [header: string]: string | string[]; }; note?: "body"; params?: Ht...'. Types of Property 'responseType' are incompatible. Type '"text"' is not Assignable to type '"json"'.

Show 2 more comments

0

Guys, I got the requisition this way:

public login(credentials):Observable{

return this._http.post<any>(AppSettings.API_ENDPOINT + 'loginnovo',
{email: JSON.stringify(credenciais.email), password: credenciais.passowrd}, 
{observe: 'response'})
.pipe(
  map((response) => ({data: response.body, status: response.status}))
)

The problem was in the.email credentials field, so I did JSON.stringify only in the email field and it worked. I don’t know why Ionic forces me to do this, because at the angle it works normal, anyway, if anyone has any more information about it.

Browser other questions tagged ionic angular http-request

You are not signed in. Login or sign up in order to post.