React native post-request is not working

[chris080]

Hey I have a problem with my react native app.

I am very desperate, because I can't find a solution for more than a week.

I am sending data with react native and fetch to my express server. This is my fetch functionality:

fetch('http://192.168.1.155:4000/login', {
method: 'POST',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json',
},
body: JSON.stringify({
userName: userName,
password: password,
}),
})
.then((response) => response.text)

My express server listens to this route:

app.post("/login", (req, res) => {
console.log("Request: ", req.query)
userRepository.login(req.query.userName, req.query.password)
.then(() => {
res.status(200).send("Login sucessfull")
})
.catch(err => {
res.status(401).send("" + err) //TODO Return as string or how is it supposed to be?
})
})

I tested to connect to the server with postman and I get response code 200 with the message "Login sucessfull"
But when I post it with my react native app, nothing happens. I logged the request and I get an empy object {} when I post with my app. When I post with postman, I get the login data I've sended
(And yes, I know, this isn't very secure to send login data. This is just for educational things. Encrypting and data security will be added after that)

What I thought would be, that I have to open the ports. I opened them, since my phone is another device than my laptop, which could explain, why postman can post and my app not. But it doesn't change anything. Actually I can connect with my smartphone to the server with a "get"-request over this route:

app.get("/", (req, res) => {
res.send("Mainpage for faster debugging")
})

So the connection is not the problem. And since postman (and my phone-browser) can work it out, the server is also okay. So I think the problem is in my react native fetch function. Or did I have to set up something? I use the app on android.

 

[Phro0244]

Based on the code you provided, it seems that the issue lies in the way you're accessing the request data in your Express server. In your React Native code, you're sending the data in the request body as JSON, but in your server code, you're trying to access it from the query parameters (req.query).

To fix this issue, you should use req.body instead of req.query to access the data sent in the request body. Here's an updated version of your Express server code:

javascriptCopy code
app.post("/login", (req, res) => {
console.log("Request: ", req.body);
const { userName, password } = req.body;

userRepository
.login(userName, password)
.then(() => {
res.status(200).send("Login successful");
})
.catch((err) => {
res.status(401).send("" + err);
});
});

By using req.body, you can access the data sent in the request body as JSON. The userName and password variables are extracted from the request body for further processing.

Make sure you have the necessary middleware configured in your Express server to parse the JSON request body. You can use the body-parser middleware for this purpose:

javascriptCopy code
const express = require("express");
const bodyParser = require("body-parser");

const app = express();

app.use(bodyParser.json());
app.use(bodyParser.urlencoded({ extended: true }));

// Rest of your code...

app.listen(4000, () => {
console.log("Server is running on port 4000");
});

With these changes, your server should be able to properly receive and process the login data sent from your React Native app.