Supplementary: payload and form-data requests for ionic-post, nodejs express read data problem

Write the front end in ionic3 and read the data in the back end in express, but

req.body , req.params, req.query

There's no data. It's all {} printed out.

Reason:

Before:

When requesting data at the front end, request payload is used

- backstage

app.post('/user/add',function(req,res,next) {
    console.log(req.body);
    console.log(req.params);
    console.log(req.query);

Result:
{}
{}
{}

- after

The request becomes form-data

- The background remains unchanged uuuuuuuuuuuu

Result:
{ username: 'xl', userpass: 'xl', minority: '0' }
{}
{}

Code reasons and changes:

let userUp = 'username=' + this.register.username + 
                 '&userpass=' + this.register.userpass + 
                 '&minority=' + (this.register.minority?0:1); 

let userD = {username: this.register.username,   
                 userpass: this.register.userpass, 
                 minority: (this.register.minority?0:1) };

let headers = new HttpHeaders();
headers.append('Content-type', 'application/x-www-form-urlencoded');

let header = {
        //headers: headers
        headers: {'Content-type': 'application/x-www-form-urlencoded'}
};

let regFail = this.alertCtrl.create({
          title: 'User registration failed',
          buttons: [{text: 'Got it', role: 'cancle'}]
});

this.http.post(this.url + 'user/add', userD , header).toPromise()
    .then((res)=>{
      console.log(res);
      ......

Among them:

let header = {
        //headers: headers
        headers: {'Content-type': 'application/x-www-form-urlencoded'}
    };

PS: This HttpHeaders is a new angular header, quoted in
import { HttpClient, HttpHeaders } from '@angular/common/http';
Click here to view the API

Conclusion:
1. The effect of using headers: headers is payload. Backstage can not read data with query, body, params.
2. Using headers: {'Content-type':'application/....'} to transfer data is the form data form, using req.body to obtain data.
I haven't figured out why... It killed me. (Ask big guys to answer!!!)

One additional problem is that I searched for payload and form data transfers and said payload was the original ajax request, which was streamed in. I tried listening stream transmission on the Internet to get the transmitted data, and then console got the output as follows.

test: == {"username":"xls","userpass":"xls","minority":0}

Method code:

app.post('/user/add',function(req,res,next) {
    //All three have no output.
    console.log(req.body);
    console.log(req.params);
    console.log(req.query);

    // Output as above test....
    var str = 'test:   == ';
    req.on('data', (dt)=>{
        str += dt;
    })
    req.on('end', (dt)=>{
        console.log(str);
    })
});

Then you can change it yourself.

Finally, add one: when ionic makes a post request, the way in which data is passed is different, which has an impact on the result. For example:

let userUp = 'username=' + this.register.username + 
                 '&userpass=' + this.register.userpass + 
                 '&minority=' + (this.register.minority?0:1); 

let userD = {username: this.register.username,   
                 userpass: this.register.userpass, 
                 minority: (this.register.minority?0:1) };

this.http.post(this.url + 'user/add', userD , header).toPromise()......

Using userD and userUp background req.body to get data results is different. Transfer it directly in json data format, and encapsulate it again when express gets the data. You have to t amp er twice. Use a get-like approach (i.e. & it's easier to get data).

  1. userD: Result (encapsulated one more layer)
    { '{"username":"23","userpass":"43","minority":0}': " }

  2. Using userUp: Results
    { username: 'xl', userpass: 'xl', minority: '0' }

Tags: Attribute angular JSON

Posted on Thu, 27 Dec 2018 18:09:06 -0800 by elfyn