If not using vanilla js I have always used jQuery to make AJAX requests. Now since React has been taking over, to make AJAX requests there is no need to use the whole jQuery library to make these requests so we are encouraged to use either js' built in fetch method, axios or many others.

I have been trying to make a POST request using fetch. I am able to make it using axis but not fetch.

axios.post('', {
    "email": "peter@klaven",
    "password": "cityslicka"
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
}); 

The axios code looks like this, but when I try what I believe to be the same thing using fetch it doesn't work. Can anyone see what I am missing? The values are being posted, but the API is returning an error, so I must be doing something wrong.

var data = {
    "email": "peter@klaven",
    "password": "cityslicka"
}

fetch("", {
    method: "POST",
    body:  JSON.stringify(data)
})
.then(function(response){ 
    return response.json(); 
})
.then(function(data){ 
    console.log(data)
});

If not using vanilla js I have always used jQuery to make AJAX requests. Now since React has been taking over, to make AJAX requests there is no need to use the whole jQuery library to make these requests so we are encouraged to use either js' built in fetch method, axios or many others.

I have been trying to make a POST request using fetch. I am able to make it using axis but not fetch.

axios.post('https://reqres.in/api/login', {
    "email": "peter@klaven",
    "password": "cityslicka"
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
}); 

The axios code looks like this, but when I try what I believe to be the same thing using fetch it doesn't work. Can anyone see what I am missing? The values are being posted, but the API is returning an error, so I must be doing something wrong.

var data = {
    "email": "peter@klaven",
    "password": "cityslicka"
}

fetch("https://reqres.in/api/login", {
    method: "POST",
    body:  JSON.stringify(data)
})
.then(function(response){ 
    return response.json(); 
})
.then(function(data){ 
    console.log(data)
});

• javascript
• ajax
• fetch
• axios

• Are you sure the API wants a JSON body, not URL-encoded like normal form posts? – Barmar Commented Jan 17, 2017 at 21:12
• What does 'doesn't work' mean? Is the request not happening? Is it failing to get the values across? – Osman Commented Jan 17, 2017 at 21:19
• @Osman I have updated the question – user6002037 Commented Jan 17, 2017 at 22:03

2 Answers 2

 var headers = {
   "Content-Type": "application/json",                                                                                                
   "Access-Control-Origin": "*"
}

try adding the above lines to headers.

var data = {
    "email": "peter@klaven",
    "password": "cityslicka"
}

fetch("https://reqres.in/api/login", {
    method: "POST",
    headers: headers,
    body:  JSON.stringify(data)
})
.then(function(response){ 
    return response.json(); 
})
.then(function(data){ 
    console.log(data)
});

Using arrow functions:

fetch('http://myapi.com/user/login', {
    method: 'POST',
    headers: {
      'Accept': 'application/json',
      'Content-type': 'application/json',
    },
    body: JSON.stringify({
      login: login,
      senha: password
    })
  }).then(response => response.json())
  .then((responseJson) => console.log(responseJson))
}).catch(error => console.log(error));