CODEWITHSUNDEEP
react-native
samb90
samb90

Reputation: 1073

React Native - Fetch POST request is sending as GET request

I'm having issues when using FETCH.

I am trying to make a POST request using FETCH in react-native.

    fetch("http://www.example.co.uk/login", {
        method: 'POST',
        headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
        },
        body: JSON.stringify({
            username: 'test',
            password: 'test123',
        })
    })

        .then((response) => response.json())
        .then((responseData) => {
            console.log(
                "POST Response",
                "Response Body -> " + JSON.stringify(responseData)
            )
        })
        .done();
}

When I inspect this call using Charles it is recorded as a GET request and the username and password that should be in the body are not there.

enter image description here

Can anyone help with this issue?

Upvotes: 25

Views: 94639

Answers (12)

amboji alur
amboji alur

Reputation: 429

This worked for me!


 const params = {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({
        id: '1',
        name: 'user',
        age: '26',
      
      }),
    };
    fetch('https://yourapi/', params)
      .then(response => response.json())
      .then(data => console.log(data));

Upvotes: 0

Abdeali
Abdeali

Reputation: 1

Similar to Rishijay's answer, my issue was with JSON.stringify not properly converting the body of POST request.

The way I solved this was using build from the search-params node module to make it work. My fetch contents had body like this body: build({...})

Upvotes: 0

Monarch Wadia
Monarch Wadia

Reputation: 4996

Check your OPTIONS response. It probably has a 302 redirect or similar.

In our case, Django didn't like it if the URL didn't end in a /

Upvotes: 0

Aurelian Zaha
Aurelian Zaha

Reputation: 41

In my case, the redirect was caused by wrongly formed url for the POST request: http://localhost:90/Worx/drupal/d8/www//jsonapi double slash before jsonapi

Because of the wrong url, the browser was redirecting the request and changing the method from POST to GET.

I was able to debug it after reading this: https://serverfault.com/questions/434205/nginx-https-rewrite-turns-post-to-get

Upvotes: 3

Rishijay Shrivastava
Rishijay Shrivastava

Reputation: 559

Use FormData. Problem is with JSON.stringify. You can directly import, its not third party

import FormData from 'FormData';
...
var data = new FormData();
data.append("username", "ABCD");
data.append("password", "1234");
fetch('YOUR_URL', {
method: 'POST',
headers: {
    Accept: 'application/json',
    'Content-Type': 'multipart/form-data',
},
body:data,
})
.then((response) => response.json())
.then((responseJson) => {
    console.log('response object:',responseJson)
})
.catch((error) => {
  console.error(error);
});

Upvotes: 6

user8603159
user8603159

Reputation:

I have made some changes and tested it, works fine for me, check below all the changes:

 constructor(props) {
    super(props);
    this.state = { isLoading: true};
    this.getRemoteData();
 }

getRemoteData = () => {

fetch('http://www.example.co.uk/login', {
            method: 'POST',
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json'
            },
            body: JSON.stringify({
                username: 'test',
                password: 'test123',
            })
        })

            .then((response) => response.json())
            .then((responseData) => {
                console.log("RESULTS HERE:", responseData)

            this.setState({
          isLoading: false,
          dataSource: responseJson,
        }, function(){

        });
      })
      .catch((error) =>{
        console.error(error);
      }) 
};

Upvotes: 0

Ryosuke Hujisawa
Ryosuke Hujisawa

Reputation: 2872

If you wanna do POST request using fetch, You can do like that 

        fetch('[email protected]&[email protected]', {
             method: 'POST'
          })
          .then((response) => response.json())
          .then((responseJson) => {
             console.log(responseJson);
             // this.setState({
             //    data: responseJson
             // })
          })
          .catch((error) => {
             console.error(error);
          });

Upvotes: 2

Hesan Aminiloo
Hesan Aminiloo

Reputation: 428

I had the same issue. In my case I had an extra / at the end of my route. I removed it and problem solved.

http://google.com/someData/ to http://google.com/someData

Upvotes: 0

aditi
aditi

Reputation: 31

Redirection of url converts the POST request into GET requests.(Don't know why) So make sure of adding trailing arrows if any. like :"http://www.example.co.uk/login/"

Upvotes: 1

Josh Baker
Josh Baker

Reputation: 608

I had this issue when the POST request was to an HTTPS (rather than HTTP) server. For some reason, it would somewhere along the way be converted into a GET request.

It turns out what I was doing incorrectly was sending the request to http://myserver.com:80 rather than to https://myserver.com:443. Once I switched it over to the proper prefix and ports, the request would properly send as a POST.

Upvotes: 11

aarkerio
aarkerio

Reputation: 2364

This worked for me:

let data = {
  method: 'POST',
  credentials: 'same-origin',
  mode: 'same-origin',
  body: JSON.stringify({
    appoid: appo_id
  }),
  headers: {
    'Accept':       'application/json',
    'Content-Type': 'application/json',
    'X-CSRFToken':  cookie.load('csrftoken')
  }
}
return fetch('/appointments/get_appos', data)
        .then(response => response.json())  // promise
        .then(json => dispatch(receiveAppos(json)))
}

Upvotes: 10

user2783957
user2783957

Reputation: 51

I had the same kind of issue. You have to assign the object, not sure why.

let options = {};

options.body = formdata;

options.header = header;

options.method = 'post';

Upvotes: 3

Related Questions