3

I'm trying to get/read the response from a POST request made in Angular 7, if I set the API to return "text" everything is OK, but when i make the response a JSON the response body on Angular is null.

If I try the API on Postman I get full response JSON body.

I tried changing response method on Express API (from the simple res.json() to the "old" way of declaring Content-Type and sending it with res.end()), nothing changed.

The response code I'm using on backend:

res.status(200).json({
    success: true,
    token: token
})

What I also tried:

res.writeHead(200, { 'Content-Type': 'application/json' })
var json = JSON.stringify({
    success: true,
    token: token
})
res.end(json)

The service I'm using on Angular:

login(username: string, password: string): Observable<any> {
    let body = {username: username, password: password};
    let headers = new HttpHeaders(); 
    headers.set('Content-Type', 'application/json');

    return this.http.post(this.baseUrl + "/login/sign-in", body, {headers: headers, responseType: 'json', observe: 'response'});
  }

The call to that service:

this.api.login("admin", "password").subscribe(result => {
    console.log(result);
})

On Postman I get this result: postman result

On Angular I get this (JSON): angular result - json

On Angular I get this (TEXT): angular result - text

Edit:

If I add anything before the JSON on the Express app, the body is no more null:

res.writeHead(200, { 'Content-Type': 'application/json' })
    var json = JSON.stringify({
    success: true,
    token: token
})
res.end('some_char' + json)

The result (of course the response goes in error): result

Edit 2:

I'm also trying (with no luck) with this simple version of the endpoint:

const express = require('express')

const app = express()

app.post('/login/sign-in', (req, res) => res.json({ value: 1 }))

app.listen(3000, () => {
    console.log('App running on port 3000.')
})

Solution:

It was all a CORS problem, I added this to the backend and everything is working fine:

app.use(cors())
Alessandro
  • 39
  • 4
  • The response you are showing in postman has a `message` property. I do not see that in your node code; where is that coming from? Also, what behavior do you see when you use `res.send`? – Pytth Jun 05 '19 at 22:22
  • Sorry I can't get it, I use the exact same endpoint on both Angular and Postman. With res.send I get the same behavior as usign res.json – Alessandro Jun 06 '19 at 15:46
  • OK now I got what you meant, I removed the `message` property for testing purposes. But it is still the same endpoint. I also made another test making a node app that consumes that endpoint with a simple `fetch` et voilà I get the correct response. The exact same method copied into the Angular project does not do the job. I'm very lost at the moment – Alessandro Jun 06 '19 at 16:26

1 Answers1

1

Spent a few minutes trying to find out why the body would be empty,

In my case, I had "mode":"no-cors" set in my fetch() options, therefore the returned value from the server would appear as "opaque"

redux fetch body is not use with no cors mode

I hope this can help !

Steve Lng C
  • 1,204
  • 1
  • 8
  • 9