Fetch: Can you pass parameters to the server

Question

I'm using a basic fetch to obtain data from an express server that queries the data from a database. So I want to do a login system, i want to send the user/password from the input fields with the fetch request. so i can perform the logical check to see if password matches the data in the server. and respond with the result. Is it possible to do a fetch that can pass parameters?

Updated Code Below:

let fetchData = {
  method: "post",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },

  body: JSON.stringify({
    username: this.state.user,
    password: this.state.password
  })
}

var fromServer = fetch('http://localhost:3000/', fetchData)
.then(function(response){
  if( !response.ok){
    throw Error (response.statusText);
  }
  return response.json();
})
.then(function(response) {
  console.log(response);
})
.catch(error => console.log("there was an error --> " + error));

Express function

app.post('/', function(req, res){
  var uname = req.body.username;
  var pw = req.body.password;
  console.log(uname);
  console.log(pw);
});

hellojebus · Accepted Answer · 2017-05-29T17:28:24.490

23

Of course you can!

Here is an example of Fetch using a POST request:

fetch("http://example.com/api/endpoint/", {
  method: "post",
  headers: {
    'Accept': 'application/json',
    'Content-Type': 'application/json'
  },

  //make sure to serialize your JSON body
  body: JSON.stringify({
    name: myName,
    password: myPassword
  })
})
.then( (response) => { 
   //do something awesome that makes the world a better place
});

I've answered this question before, check this for more details:

POST Request with Fetch API?

To process the request in Express, as mentioned in your comment assuming your express server is setup to parse body requests, you can do this:

app.post('/your/route', function(req, res) {
    var name= req.body.name;
    var password = req.body.password;

    // ...do your bidding with this data
});

edited May 29 '17 at 17:28

answered May 29 '17 at 02:15

hellojebus

3,267
1
21
23

oh alright, and on the server side, do i just do a app.get? or app.post function? – Eric May 29 '17 at 02:23
Based on my example, and assuming you are working with ExpressJS, then yes app.post() is what you need to process that request. – hellojebus May 29 '17 at 02:35
ugh i feel like an idiot, i'm getting the post request but im not sure how to extract the data i'm passing over to express. in the app.post() function. – Eric May 29 '17 at 03:28
1

Parsing your data is a different issue, please follow this tutorial and specially pay attention to the body-parser section needed for JSON post requests: https://scotch.io/tutorials/use-expressjs-to-get-url-and-post-parameters – hellojebus May 29 '17 at 17:25
I've updated my response to show how it would be done, assuming your Express server is configured as the tutorial or similarly. – hellojebus May 29 '17 at 17:28
Oh that makes so much sense, since you placed the info into the body you can try to find it in the request.body. Thanks for clarifying this for me. – Eric May 30 '17 at 12:51
However i'm now getting a TypeError: Cannot read property 'username' of undefined Error. Did i do something wrong here? – Eric May 30 '17 at 12:52
Actually i did a console log, after placing the user and pw into the body with fetchData.body.username and got an undefine return. somehow the data is not being put in – Eric May 30 '17 at 12:55
2

I finally got it fully functional, it was the JSON parsing that was giving me some problems. Thank you so much for your patience and guidance! – Eric May 30 '17 at 15:17

Fetch: Can you pass parameters to the server

1 Answers1