React-Native Server Error When making a simple API request - node.js

Question

I have a frontend in react-native that makes an API call using the axios library; its shown below:
function addItem(item) {
if (!item) {
Alert.alert('Error', 'Please enter a valid item.', [{text: 'Ok'}]);
} else {
axios.get('/additem', {
Id: items[items.length - 1].id + 1,
Text: item
})
.then((res) => {
setItems([...items, {id: res.id, text: res.text}])
})
.catch((err) => {
console.log(err);
})
}
}
As you can see, I am making a GET request to an endpoint, and using the response data.
Here is what my backend endpoint looks like in Node.js (using Express.js):
app.get('/additem', (req, res) => {
const item = new Item({
id: req.body.Id,
text: req.body.Text
});
item.save()
.then((result) => {
res.send(result)
})
.catch((err) => {
console.log(err)
})
})
The save() function and Item object are just specific to MongoDB, so don't worry too much about that.
I am using a proxy to "connect" the backend and frontend, meaning, I have added this to my package.json file in my frontend:
{
"name": "firstProj",
"version": "0.0.1",
"private": true,
"proxy": "https://localhost:5000",
"scripts": {
"android": "react-native run-android",
"ios": "react-native run-ios",
"start": "react-native start",
"test": "jest",
"lint": "eslint ."
},
localhost:5000 is where my node.js backend is running
Now when I try to access the endpoint via my frontend, react-native yells at me saying this:
LOG [Error: Network Error]
Zero clue why this is happening. Any help is appreciated. :) Let me know if you need more information from my end.
Thanks a ton.
EDIT:
this is the full error when not caught by my code:
Possible Unhandled Promise Rejection (id: 0):
Error: Network Error
createError#http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:99656:26
handleError#http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:99560:27
dispatchEvent#http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:32348:31
setReadyState#http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:31432:33
__didCompleteResponse#http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:31248:29
emit#http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:3537:42
__callFunction#http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2765:36
http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2497:31
__guard#http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2719:15
callFunctionReturnFlushedQueue#http://10.0.2.2:8081/index.bundle?platform=android&dev=true&minify=false:2496:21
callFunctionReturnFlushedQueue#[native code]

Answer 1

just Remember to not put http://localhost:PORT into API Address because it will not work in that way
the way you should do it is first find your internet IP address on your machine like :
108.67.122.124
and then you change setting in your backend Service and replace localhost with this :
108.67.122.124:PORT
and then Address it like that to your AXIOS or whatever library you use
So lets wrap it again :
DONT address your react native like http:localhost:5000 instead do it like 108.67.122.124:5000 In that way it will fully work