Angular POST request response is null (yet server returns correct string)

The problem is fairly simple: I am making a request like I have always been doing up until now from my client (angular) to my .net API (3.1). The API is correctly requested and the answer is correctly sent.Yet, when it arrives on my client, the response is null. How is that?

Server side:

    [HttpPost]     [Route("api/XXXXXXXX")]     [RequestSizeLimit(4_000_000_000)]     [Microsoft.AspNetCore.Cors.EnableCors]     public string JsonFilterResponse([FromBody] JsonElement jsonresult)     {         try         {             var json = System.Text.Json.JsonSerializer.Serialize(jsonresult);             if (json != null)             {                 var savepath = ".//JsonResponses//"; Random rnd = new Random();                 var id = rnd.Next().ToString();                 var filePath = Path.Combine(savepath, id);                   System.IO.File.WriteAllText(filePath, json);                  // return job complete                  Response.Body.Flush(); // http response                 Ok();                 return id; // server response --> the id of the file created             }             else             {                 NotFound();                 return null;             }          }         catch (Exception)         {             StatusCode(500, "InternalĀ serverĀ error");             return null;         }     } 

Client side:

  public uploadjsonresponse(file, apiname, filename, end, appcomponent, secondapiname) {      let headers = new HttpHeaders({       'Content-Type': 'application/json',       'Access-Control-Allow-Origin': '*',     });      return this.httpClient.post(this.SERVER_URL + apiname, file, {headers: headers}).pipe(map(res =>    {        appcomponent.filemapper.push(filename + ";;;" + res);       console.log(appcomponent.filemapper[appcomponent.filemapper.length-1]);       if (end) // callback         appcomponent.requestmapping(secondapiname, end, this);     }));     } 

The problem is that "res" comes back null client side. Yet, it is being correctly returned by the server (return id). Any ideas as to why that might be?

Cheers!

Add Comment
2 Answer(s)

When you enclose an arrow functions in curly braces, the return keyword should be stated explicitly. So you could append return to the statement that you wish to return from the map.

Try the following

return this.httpClient.post(this.SERVER_URL + apiname, file, { headers: headers }).pipe(map(res => {   let result = '';     // <-- change it to your desired value      appcomponent.filemapper.push(filename + ";;;" + res);   console.log(appcomponent.filemapper[appcomponent.filemapper.length - 1]);   if (end) {       // callback     result = appcomponent.requestmapping(secondapiname, end, this);   }    return result;        // <-- return result here })); 

When it comes to arrow functions

const convert = (value) => /* convert and return */; 

is the same as

const convert = (value) => { return /* convert */ }; 
Add Comment

I am an idiot… Just needed to remove this in the .net API:

Response.Body.Flush(); // http response 

Tada. God.

Answered on August 31, 2020.
Add Comment

Your Answer

By posting your answer, you agree to the privacy policy and terms of service.