Request body is empty while sending data to server from Angular

Question

I'm trying to get data from client side ( in Angular ) to nodejs server.

In Angular I have declared a service.

export class AddTaskService {

  constructor(private http: HttpClient) { }
  url = 'http://localhost:3000/tasks';
  posttasks(task) {
    return this.http.post<string>(this.url, JSON.stringify({ task: task }));
  }

}

In server I added bodyparser and configured it

index.js

app.use(bodyParser.urlencoded({ extended: true }));
app.use(bodyParser.json());

router.js

router
    .route("/tasks")
    .post(function (req, res) {
        var taskModel = new taskSchema();
        taskModel.task = req.body.task;
        console.log(req.body);
        taskModel.save(function (err) {
            if (err) {
                res.send(err);
            }
            res.json({
                message: "nouvProj created!"
            });
        });
    });

Using postman with x-www-form-urlencoded worked, but in Angular when II send data req.body is empty

Edit: Here's url network details : General

Request URL: http://localhost:3000/tasks
Request Method: POST
Status Code: 200 OK
Remote Address: [::1]:3000
Referrer Policy: no-referrer-when-downgrade

Response Headers

Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept
Access-Control-Allow-Methods: GET, POST, PUT ,DELETE
Access-Control-Allow-Origin: *
Connection: keep-alive
Content-Length: 31
Content-Type: application/json; charset=utf-8
Date: Sun, 27 May 2018 19:24:57 GMT
ETag: W/"1f-NlZ/5EsK7Z/S3Ze5LQN4AonQQ90"
X-Powered-By: Express

Request Headers

Accept: application/json, text/plain, */*
Accept-Encoding: gzip, deflate, br
Accept-Language: fr-FR,fr;q=0.9,ar-TN;q=0.8,ar;q=0.7,en-US;q=0.6,en;q=0.5
Cache-Control: no-cache
Connection: keep-alive
Content-Length: 14
Content-Type: text/plain
DNT: 1
Host: localhost:3000
Origin: http://localhost:4200
Pragma: no-cache
Referer: http://localhost:4200/
User-Agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/66.0.3359.139 Safari/537.36

Request Payload

{task: "klj"}
task
:
"klj"

can you post what you see when you put console.log(JSON.stringify(req.body)); — Sajeetharan, May 27 '18 at 19:03
look at the network tab in chrome and determine where your request is going — Matt Pengelly, May 27 '18 at 19:03
Possible duplicate of [AngularJs $http.post() does not send data](https://stackoverflow.com/questions/19254029/angularjs-http-post-does-not-send-data) — Harshal Yeole, May 27 '18 at 19:07
^ How is this a duplicate? The linked question is Angularjs, this is Angular. — Aamir Khan, May 27 '18 at 19:21

Joshua Chan · Answer 1 · 2018-05-28T01:32:02.157

4

You can pass HTTP headers as options:

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded',
    })
}
return this.http.post<string>(this.url, task, httpOptions);

edited May 28 '18 at 01:32

answered May 27 '18 at 19:31

Joshua Chan

1,797
8
16

the result of console.log is `{ '{"task":"value"}': '' }` while expecting `{"task":"value"}` – Hamza Haddad May 27 '18 at 21:52
remove your JSON.stringify and send the javascript object directly – Joshua Chan May 28 '18 at 01:31

score 1 · Answer 2 · answered Oct 18 '18 at 17:44

1

createTask(task) {
  const httpOptions= {headers: new HttpHeaders({'Content-Type':'application/json})};
  const json = JSON.stringify(task);
  
  this.http.post(this.url, json, this.httpOptions);
}

answered Oct 18 '18 at 17:44

Shajee Lawrence

171
1
4

you're missing an end quote for application/json – SeanMC Oct 14 '19 at 23:50

score 0 · Answer 3 · answered Aug 08 '18 at 17:00

As @Joshua suggest, But you have to just change a little bit

const httpOptions = {
    headers: new HttpHeaders({
        'Content-Type': 'application/x-www-form-urlencoded',
    })
}
return this.http.post<string>(this.url, {task, httpOptions});

and in your server API you have to fetch data like

const data = req.body.task

Request body is empty while sending data to server from Angular

3 Answers3