Using fetch api to post in react

Question

I have a message method in which triggers when i click submit button on my form. but i am unable to access the url in my node rest api, i am trying to access the url by "req.body.url" which returns an undefined, when i see what is in req.body nothing is present. I have done this using axios it works fine help me in using fetch

    message(event){
       event.preventDefault();
           const uri = this.state.short.url;
             fetch("http://localhost:3000/messages", {
              method: "post",
              body: {url: uri}
              })
            .then(function(data) {
          console.log("Request succeeded with  response", data);
           })
       .catch(function(error) {
           console.log("Request failed", error);
         });
    }

You might need to add a little more information. For example where is the code that's trying to access req.body.url. — Sudsy
– Sudsy, Commented Aug 24, 2018 at 5:08
convert js object to a JSON before assigning to body? like body: json.stringify({url}) — It worked yesterday.
– It worked yesterday., Commented Aug 24, 2018 at 5:24

kroonwijk · Accepted Answer · 2019-01-14 22:18:15Z

4

In your fetch you need to specify Json and also stringing your json like so:

body: JSON.stringify({ url: uri }),
 headers:{
   'Content-Type': 'application/json'
}

edited Jan 14, 2019 at 22:18

kroonwijk

8,4103 gold badges33 silver badges52 bronze badges

answered Aug 24, 2018 at 5:10

Chris Cousins

1,92211 silver badges15 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

Lewis Over a year ago

@ArupRakshit I don't think you're right. Passing headers and stringifying JSON are still necessary.

Chris Cousins Over a year ago

When posting, the client states what the content type of it’s body is. How is stringify not required?

Chris Cousins Over a year ago

Axios does some stuff itself but the OP uses fetch though.

Arup Rakshit Over a year ago

@ChrisCousins Opps.. I am still reading it as 'axios', never used fetch, so I am not aware of... need a coffee, still awaking .

Chris Cousins Over a year ago

Ha yeah no worries, axios is great!

Sudsy · Accepted Answer · 2018-08-24 08:40:29Z

Without more information from you, I am guessing this is what you wanted:

fetch("http://localhost:3000/messages", {
    method: "post",
    body: JSON.stringify({url: uri})
    })
.then(function(response) {
    if(response.ok){
        return response.json();
    }{
        throw new Error("Post Failed")
    }
}).then(function(responseBody){
    console.log(responseBody.uri)
})
.catch(function(error) {
    console.log("Request failed", error);
});

Here's a runnable version that is very similar. It uses a service that just echos data back for testing.

    fetch("http://httpbin.org/post", {
        method: "POST",
        body: JSON.stringify({url: "test"})
    })
    .then(function(response) {
      if(response.ok){
        return response.json();
    }{
        throw new Error("Post Failed")
    }
}).then(function(responseBody){
    console.log(responseBody)
})
.catch(function(error) {
    console.log("Request failed", error);
});

thanks for the ur reply but it is not working i am getting Request failed TypeError: Failed to fetch
@VedaVyas I updated my answer to include JSON.stringify for the body and a runnable version that you can use for comparison.

Veda Vyas · Accepted Answer · 2018-08-24 05:54:38Z

0

const options = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify({ url: uri})
};

fetch("http://localhost:3000/messages", options)
  .then(response => response.json())
  .then(data =>console.log(data));
}

answered Aug 24, 2018 at 5:54

Veda Vyas

1213 silver badges11 bronze badges

Collectives™ on Stack Overflow

Using fetch api to post in react

3 Answers 3

5 Comments

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

5 Comments

2 Comments

Comments

Related