invalid json error when trying to send an object with http.post in angular

Question

I have an application published in Azure that has been running for several months without problems and since yesterday without changing or publishing anything new suddenly I can't save data.

This is tried from a service in the Front of Angular

save(data: DataSave) {
const config = { headers: new HttpHeaders().set('Content-Type', 'application/json') };

return this.http.post<any>(`${this.urlProyecto}/planning/save`, data, config)
  .pipe(
    catchError(this.handleError)
  )

}

Being DataSave the object with all the data to be inserted in the database

And when I debug locally I don't even get anything in the web api controller that is trying to get what I get is this error

SyntaxError: Unexpected token 'P', \"Planificad\"... is not valid JSON\n    at              
JSON.parse (<anonymous>)\n    at XMLHttpRequest.onLoad     
(http://localhost:4200/vendor.js:235741:39)\n    at _ZoneDelegate.invokeTask 
(http://localhost:4200/polyfills.js:3521:31)\n    at Object.onInvokeTask 
(http://localhost:4200/vendor.js:262291:33)\n    at _ZoneDelegate.invokeTask 
(http://localhost:4200/polyfills.js:3520:60)\n    at Zone.runTask 
(http://localhost:4200/polyfills.js:3293:47)\n    at ZoneTask.invokeTask [as 
invoke] (http://localhost:4200/polyfills.js:3602:34)\n    at invokeTask 
(http://localhost:4200/polyfills.js:4763:18)\n    at globalCallback 
(http://localhost:4200/polyfills.js:4806:33)\n    at    
XMLHttpRequest.globalZoneAwareCallback    
(http://localhost:4200/polyfills.js:4827:16)"      [[Prototype]]

This same JSON object that in the Angular project does not work, when I send it from the same project in Aurelia using the same web api as destination it works perfectly, that is, the same JSON in Aurelia works and in Angular it does not.

I don't know how to debug this because in network tab I see this

first a statuscode 200 and then a 204 when in the controller I have a break point and it has never arrived there

When I launch the web api I see this

Then If I call any get I see this for example

But when I call the post I see this

The controller is this

[HttpPost]
[Route("save")]
public async Task<IActionResult> Save([FromBody] DataSave data) {

  var getResponse = data == null
    ? 0
    : await mediator.Send(new Save(data));

  return Ok(getResponse);

}

This is the object in Angular

export class DataSave {
 proyectoId: string;
 datosGridHoras: DatosGrid;
 datosGridCertificaciones: DatosGrid;
 datosGridSubcontrataciones: DatosGrid;
 datosGridContratos: DatosGrid;
 cabeceraHistorico?:CabeceraHistorico;
 resumen:Resumen;

 constructor(
  resumen:Resumen,
  proyectoId: string,
  datosGridHoras: DatosGrid,
  datosGridCertificaciones: DatosGrid,
  datosGridSubcontrataciones: DatosGrid,
  datosGridContratos: DatosGrid,
  cabeceraHistorico?:CabeceraHistorico,
  ) {
      this.proyectoId = proyectoId;
      this.datosGridHoras = datosGridHoras;
      this.datosGridCertificaciones = datosGridCertificaciones;
      this.datosGridSubcontrataciones =    datosGridSubcontrataciones;
      this.datosGridContratos = datosGridContratos;
      this.cabeceraHistorico=cabeceraHistorico;
      this.resumen=resumen;
     }
  }

And this the object in web API

public class DataSave
{
 public string ProyectoId { get; set; }
 public DatosGrid DatosGridHoras { get; set; }
 public DatosGrid DatosGridCertificaciones { get; set; }
 public DatosGrid DatosGridSubcontrataciones { get; set; }
 public DatosGrid DatosGridContratos { get; set; }

 public ResumenVM Resumen { get; set; }

 public CabeceraHistoricoVM CabeceraHistorico { get; set; }
}

And honestly I'm at a loss because this has been working and now all of a sudden this thing I don't understand

I would appreciate any help

Did you try the same request with a different payload? Seems like the payload is breaking the JSON format with \". Have a look here https://stackoverflow.com/questions/770523/escaping-strings-in-javascript. AFAIK it could also be browser related — Džan Operta, Jan 12 '23 at 09:19
This same JSON object that in the Angular project does not work, when I send it from the same project in Aurelia using the same web api as destination it works perfectly, that is, the same JSON in Aurelia works and in Angular it does not — kintela, Jan 12 '23 at 10:47

score 0 · Answer 1 · answered Jan 13 '23 at 08:25

The problem is that you get the Response in text/plain format while Angular HttpClient is expecting JSON per default, that's why you get the parsing problem.

You have two options:

set the correct response type on your request in Angular -> Angular 6: How to set response type as text while making http call
change the response type on the backend to JSON, but if you have more frontend services that use this endpoint already, you might cause problems for them

invalid json error when trying to send an object with http.post in angular

1 Answers1