Fetch post with body data not working params empty

Question

I am trying to rewrite my ajax call to fetch:

Ajax:

  $.post({
    context: this,
    url: "/api/v1/users",
    data: { 
      user: 
        {
          email: email,
          password: password
        } 
    }
  }).done((user) => {
  }).fail((error) => {
  })

Fetch:

  fetch('/api/v1/users', {  
  method: 'POST',
  headers: {
    "Content-Type": "application/json"
  },      
    body: { 
    "user" : 
      {
        "email" : email,
        "password" : password
      } 
  }
  })
  .then(res => {  
    if (res.status !== 200) { {
        console.log("error")
      })          
    } else {
      res.json().then(data => {
        console.log(data)
      })
    }
  })

I am getting an error empty params ~ bad request from my server.

I also found this way to do it, but in this code below I am getting an error: Unexpected token.

  var payload = { 
    "user" : 
      {
        "email" : email,
        "password" : password
      } 
  };

  var data = new FormData();
  data.append( "json", JSON.stringify( payload ) );

  fetch('/api/v1/users', {  
  method: 'POST',
  headers: {
    "Content-Type": "application/json"
  },      
    body: data
  })

How can I rewrite the ajax request to fetch?

In nodeJS Express ALSO don't forget at the server-side: stackoverflow.com/questions/11625519/… app.use(express.bodyParser()); — Wera
– Wera, Commented Aug 27, 2024 at 11:48
In Django do not forget to add {{ csrf_token }} to your form, headers: { 'X-CSRFToken': document.querySelector( '[name=csrfmiddlewaretoken]').value } and decode the body: request.body.decode('utf-8') — Wera
– Wera, Commented Aug 27, 2024 at 11:52

Petr · Accepted Answer · 2016-10-04 13:06:13Z

76

Followed this topic on github: https://github.com/matthew-andrews/isomorphic-fetch/issues/34

The solution to my question is using the JSON.stringify function and set Content-Type header to application/json. Not pretty sure why the second attempt in my question didn't work though.

fetch('/api/v1/users', {  
    method: 'post',
    headers: {'Content-Type': 'application/json'},
    body: JSON.stringify({ "user": {
      "email" : email,
      "password" : password
    }}),
})

Official MDN Documentation:

var myHeaders = new Headers();
myHeaders.append('Content-Type', 'application/json');

fetch('/contact-form', {
    method: 'POST',
    headers: myHeaders,
    mode: 'cors',
    cache: 'default',
    body: JSON.stringify(fields)
}).then(() => {
    dispatch(contactFormSubmitSuccess());
});

answered Oct 4, 2016 at 13:06

Petr

2,1394 gold badges28 silver badges57 bronze badges

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

3 Comments

Sergio Belevskij Over a year ago

(it fails in chrome, instead this, i'm make encode params to url)

jacobedawson Over a year ago

Adding headers as Dudis suggested worked for me, thanks!

Kokodoko Over a year ago

Didn't work for me, fetch is still doing a get instead of post!

BigRon · Accepted Answer · 2021-01-19 22:32:19Z

TL;DR Without mode: 'cors' your JSON body won't go through.

I wrestled with this for a bit. cors was the issue. Assuming you are performing a request from one domain to another (i.e. from localhost:8080 to localhost:3000) you need to have mode: 'cors' in the fetch settings & your receiving domain (localhost:3000) needs to allow requests from the sending domain (localhost:8080).

So the above description in code:

request from localhost:8080 to localhost:3000

fetch('http://localhost:3000/users/sign_in', {
      method: 'POST',
      mode: 'cors', // this cannot be 'no-cors'
      headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify({
        "user": {
          "email": `${this.state.userEmail}`,
          "password": `${this.state.userPass}`
        }
      }),
    })

And then make sure your receiving domain localhost:3000 allows CORS from localhost:8080.

Sabito · Accepted Answer · 2021-08-11 17:30:27Z

15

headers: {'Content-Type': 'application/json'}

already answered

edited Aug 11, 2021 at 17:30

Sabito

5,23610 gold badges39 silver badges66 bronze badges

answered Jun 8, 2019 at 15:54

Edmunds22

80910 silver badges11 bronze badges

4 Comments

Jacob Cafiero Over a year ago

yeah, can not stress the header enough. I spent way too long confused, when the issue was me misspelling application in the header. First step is to check for typos.

incalite Over a year ago

That literally happened to me too with the exact same fetch functionality. Can stress what Jacob C. said enough. Typos people!

NickW Over a year ago

for me it was 'header: {'Content-Type': 'application/json'}'. bloody typos

yewness Over a year ago

without an s, it just cost you another day. :(

Nimantha · Accepted Answer · 2023-11-24 03:07:48Z

10

Worked in this way when sending body as json failed.

        var formData = new FormData();
        formData.append('key1', 'value1');
        formData.append('key1', 'value2');

        fetch('url', {
            method: 'post',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'multipart/form-data'
            },
            body: formData
        }`)`

In my case, the server only identified the content through the form-data submission. The code was not written to read the request body as json. So there is a possibility to have an issue with your server side code as well.

edited Nov 24, 2023 at 3:07

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Aug 15, 2018 at 7:53

buddhiv

7181 gold badge9 silver badges27 bronze badges

1 Comment

Mudassir Over a year ago

after lot of struggle the above method worked for me. thanks for the explanation.

Matan Livne · Accepted Answer · 2020-06-22 10:31:18Z

8

If you're using an Express server to handle the requests, make sure you add in this line:

app.use(express.json({limit:'1mb'}))

answered Jun 22, 2020 at 10:31

Matan Livne

1733 silver badges7 bronze badges

Comments

David Chavez · Accepted Answer · 2021-12-30 16:30:03Z

7

The only thing working for me was to put

app.use(express.json())

in my main server file.

answered Dec 30, 2021 at 16:30

David Chavez

1601 silver badge8 bronze badges

Comments

gamboa · Accepted Answer · 2016-10-04 00:23:05Z

2

You should try this:

fetch('/api/v1/users', {
    method: 'post',
    body: JSON.stringify({"user":{
        "email": email,
        "password": password
    }}),
});

fetch API

edited Oct 4, 2016 at 0:23

answered Oct 4, 2016 at 0:16

gamboa

1413 bronze badges

1 Comment

Petr Over a year ago

Thanks, it's basically the same like my second example in my question. It's still showing me params missing although the ajax version works just fine.

Martin CR · Accepted Answer · 2021-12-23 01:50:47Z

1

Try putting (body-parser) at the top of your app.js / server.js :

app.use(bodyParser.json());

edited Dec 23, 2021 at 1:50

Martin CR

1,44916 silver badges30 bronze badges

answered Dec 16, 2021 at 19:46

Hamied Amr

113 bronze badges

Comments

Nimantha · Accepted Answer · 2023-11-24 03:07:15Z

-1

The problem is that fetch does not work with no-cors. So you should set mode on cors like this:

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

const Params = {
  key: value,  // replace this by your data key and value
};

await fetch( "url_here",
  {
    method: "POST",
    headers: myHeaders,
    mode: "cors",
    cache: "default",
    body: JSON.stringify(Params),
 }
).then((response) => response.json())
  .then((data) =>
    console.log(data)
  )
  .catch((error) => console.log(error));

edited Nov 24, 2023 at 3:07

Nimantha

6,5376 gold badges32 silver badges78 bronze badges

answered Nov 24, 2023 at 2:23

Sylvain Codes

1451 silver badge4 bronze badges

Collectives™ on Stack Overflow

Fetch post with body data not working params empty

9 Answers 9

3 Comments

Comments

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

9 Answers 9

3 Comments

Comments

4 Comments

1 Comment

Comments

Comments

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related