ANGULAR : POST request return null

Question

when i add a new group i want to have an answer like the one on postman because i need the object id add

this is my function in service

addGroupe(groupe: Groupe): Observable<Groupe> {
    return this.http
      .post<Groupe>(`${this.url}/groupe`, groupe)
      .pipe(catchError(this.handleError('addGroupe', groupe)))
  }

and here is the function to retrieve the answer, but it always returns null

this.groupeService.addGroupe(groupe).subscribe((resp: Groupe) => {
      console.log("response", resp);      
    });

In your Postman example, you are executing a POST of type content-type `x-www-form-urlencoded`, but in your HttpClient post(), you are not specifying that content-type, so by default Angular will send it as a content-type `application/json`. Is your API accepting the POST from Angular and doing what you expect? — Alexander Staroselsky, Apr 04 '19 at 14:59
First try updating the post() to send data as type `x-www-form-urlencoded`. Try the following https://stackoverflow.com/questions/39863317/how-to-force-angular2-to-post-using-x-www-form-urlencoded. Basically try using [HttpParams](https://angular.io/api/common/http/HttpParams) — Alexander Staroselsky, Apr 04 '19 at 15:03

score 2 · Accepted Answer · edited Jun 20 '20 at 09:12

Change :

addGroupe(groupe: Groupe): Observable<Groupe> {
    return this.http
      .post<Groupe>(`${this.url}/groupe`, groupe)
      .pipe(catchError(this.handleError('addGroupe', groupe)))
}

To :

let options = {
    headers: new HttpHeaders().set('Content-Type', 'application/x-www-form-urlencoded')
};
addGroupe(groupe: Groupe): Observable<Groupe> {
    return this.http
      .post<Groupe>(`${this.url}/groupe`, groupe, options)
      .pipe(catchError(this.handleError('addGroupe', groupe)))
}

Additional: to make sure all browsers support it I recommend using polyfill

import 'url-search-params-polyfill';

npm i url-search-params-polyfill --save

More explicitly : CORS errors can happen for several reasons but always about security risk, the server have the right to determine the access the client has, and the browsers followers its instructions that are a part of the response headers, like:

'Access-Control-Allow-Credentials' : true,
'Access-Control-Allow-Origin':'*',
'Access-Control-Allow-Methods':'GET',
'Access-Control-Allow-Headers':'application/json'

You issue if more likely as I suggested earlier (application/x-www-form-urlencoded). However in the off chance that didn't work you can run curl -I http://ip:port in terminal (or cmd but need to be installed if you're using windows) to see if the server Access-Control-Allow-Origin is allowing your client. Either by specifying the IP:PORT or *(means that all are allowed). If you're not allowed then you can either change the response headers in the server (if you can access to) or use a CORS proxy (if the server is on the WAN not just locally stated), or use a browser plugin to ignore the server instructions but I wouldn't recommend that because other users would be able to use it.

score 1 · Answer 2 · answered Apr 04 '19 at 18:54

You are getting cors origin error, means you angular application on localhost:4200 and your api on localhost:8000 if you are using dotnet core as your backend you can set your cors settings dotnet core

Or you can use cors from google store https://chrome.google.com/webstore/search/Access-Control-Allow-Origin

score 0 · Answer 3 · answered Dec 09 '20 at 22:24

One possible cause is the return of null of a http post request, is the invalid response code such as 205 : Reset Content, the server must return a valid http response code (200:OK) See this link to capture HTTP Response code Angular : Handling HTTP Response

ANGULAR : POST request return null

3 Answers3