CODEWITHSUNDEEP
react-nativefetch-api
Johnathan Barrett
Johnathan Barrett

Reputation: 556

fetch not sending body in React Native

I'm trying to post some JSON to an endpoint on the local network from a react native app but it doesn't seem to actually be POSTing the body.

    fetch( 'http://192.168.4.1/access-points', {
        method: 'POST',
        headers: {
            'Content-Type': 'application/json',
        },
        body: JSON.stringify( {
            ssid: 'SSIDNAME',
            password: 'SSIDPASSWORD',
        } ),
    } );

It hits the endpoint ok, with the right method and content type but the body is no where to be found.

Below is what the endpoint seems to receive when I make the request from the react native app.

POST /access-points HTTP/1.1
Host: 192.168.4.1
Content-Type: application/json
Connection: keep-alive
Accept: */*
User-Agent: Hame/1 CFNetwork/808.2.16 Darwin/15.6.0
Content-Length: 45
Accept-Language: en-us
Accept-Encoding: gzip, deflate

When I make the request using Paw this is what I get

POST /access-points HTTP/1.1
Content-Type: application/json; charset=utf-8
Host: 192.168.4.1
Connection: close
User-Agent: Paw/3.0.16 (Macintosh; OS X/10.11.6) GCDHTTPRequest
Content-Length: 45

{"ssid":"SSIDNAME","password":"SSIDPASSWORD"}

As you can see though, both are reporting the correct Content-Length

Upvotes: 1

Views: 1670

Answers (2)

Noel Yap
Noel Yap

Reputation: 19808

I had a similar issue -- The Spring Boot service was receiving POST body from Postman just fine but the call from my React app was received with no body and a Content-Length of -1.

After some hunting, I came across https://github.com/github/fetch/issues/318#issuecomment-335086509. This led me to learning more about CORS and adding the following to the @RestController class in my Spring Boot app:

@CrossOrigin(origins = WHITELISTED_AUTHORITY)

Alternatively, the React client fetch call could have:

    headers: {
      Origin: AUTHORITY,
    }

Setting it from the server would request the clients to send that info making it one less thing client programmers would have to do but it could (I don't know how all this works deeply enough to be sure -- those who do, please edit this answer) lead to more round trips between the client and server.

Upvotes: 1

Huy Lê Nguyễn
Huy Lê Nguyễn

Reputation: 1

I had the same issue, then I checked request.form and request.data and I found out that the body was sent to request.data, so request.form returned None

So the solution is either change request.form to request.data or change the fetch options to send the body to request.form

If you want to send the body to request.form, set the headers:

'Accept': 'application/json',
'Content-Type': 'multipart/form-data'

For example, the data is

const data = {
    ssid: 'SSIDNAME',
    password: 'SSIDPASSWORD',
}

Then create the form-data:

const formData = new FormData();
for (key in data) {
    formData.append(key, data[key]);
}

And the fetch will be:

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

Upvotes: 0

Related Questions