React native post-request is not working

Joined
May 24, 2023
Messages
1
Reaction score
0
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.
 
Joined
Mar 31, 2023
Messages
95
Reaction score
8
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.
 

Ask a Question

Want to reply to this thread or ask your own question?

You'll need to choose a username for the site, which only take a couple of moments. After that, you can post your question and our members will help you out.

Ask a Question

Members online

Forum statistics

Threads
473,813
Messages
2,569,696
Members
45,482
Latest member
AshleighMo

Latest Threads

Top