I'm trying to fetch an json from a locally hosted express API using a react native fetch get request.
Our react native code is :
useEffect(() => {
fetch("http://localhost:5000/api/listings")
.then((response) => response.json())
.then((responseJSON) => {
console.log(responseJSON);
setIsLoading(false);
setListings(responseJSON);
})
.catch((error) => console.log(error));
}, []);
The following error is logged when we try to send the request:
Network request failed
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:30140:19 in <unknown>
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:31129:20 in <unknown>
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:31045:8 in _callTimer
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:31253:8 in Object.callTimers
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3213:30 in MessageQueue.__callFunction
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:2945:16 in <unknown>
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:3167:12 in MessageQueue.__guard
at http://192.168.1.34:19000/node_modules%5Cexpo%5CAppEntry.bundle?platform=ios&dev=true&hot=false&minify=false:2944:13 in MessageQueue.callFunctionReturnFlushedQueue
When sending a get request from postman, the json is displayed so I am confused what is going wrong.
I believe the code below will help you. Enter it in terminal / cmd. Your emulator must be open.
adb reverse tcp:5000 tcp:5000
Now your link should work http://localhost:5000/api/listings
If the first option did not work, try replacing your link by the link below:
http://10.0.2.2:5000/api/listings
This is due to the fact that Android does not understand localhost as your PC, for it, it is the localhost, so in the first choice we redirect the emulator door traffic for Windows / Linux. In the MacOS this error does not occur because the MacOS understands that the whole environment is localhost.
Run the below command to access localhost or 127.0.0.1 or your computer's ip
adb -s <device_name> reverse tcp:backend_port tcp:backend_port
Example:
adb -s emulator-5554 reverse tcp:8080tcp:8080
OR
adb reverse tcp:8080 tcp:8080
The development environment is a context and the android runner environment (if it is this) is another context.
If your backend is in node, you could use the serve lib. It is SO independent and I think this is the easiest form.
You could configure the host in /etc/hosts/ file too, if you are using Linux (Debian-like).
Related
I have a little NodeExpress server and when I try to make a request to the server it returns a 403 error
I have installed Cors and used it and tried with chrome browser and Postman as 2 clients and got the same denied error
var express = require('express')
var cors = require('cors')
var app = express()
app.use(cors())
app.get('/', function (req, res, next) {
res.json({msg: 'This is CORS-enabled for all origins!'})
})
app.listen(80, function () {
console.log('CORS-enabled web server listening on port 80')
})
I was having this having this problem with using firebase serve on MacBook Pro (14-inch, 2021), Apple M1 Pro, macOS Monterey 12.3
UPDATE:
so apparently the reason was
macOS Monterey introduced AirPlay Receiver running on port 5000. This prevents your web server from serving on port 5000. Receiver already has the port.
so the solution proposed by the answer quoted above, was to either turn off the AirPlay Receiver, or to run your app on another port.
if you are running your app using firebase serve, You can change the port by following this approach:
source
firebase.json file doesn't work with the the firebase serve command.
You have to use the firebase emulators:start command.
If you want to keep using firebase serve then it should be use like
in:
firebase serve --only hosting --port=5002
OLD ANSWER:
Not a sufficient answer, but I was able to bypass this by entering 127.0.0.1 instead of localhost. I don't think this is the best answer, neither I am satisfied with it. I'll definitely come back later and update the answer once I find a better answer.
just use another port e.g. 5100
"sampleApp": {
"commandName": "Project",
"launchBrowser": true,
"launchUrl": "weatherforecast",
"applicationUrl": "http://localhost:5100",
"environmentVariables": {
"ASPNETCORE_ENVIRONMENT": "Development"
}
}
Sometimes I had the same issue when developing FLASK application on Monterey and using Chrome.
A restart of Chrome always solved the issue. I suppose that not stopping the application properly is the root cause in my case.
I've just encountered this issue. My stack was Node + Express
With this stack, above solution works as well.
All I had to do was to change the porn number:
app.listen(5000); // does not work
app.listen(8000); // all good :)
I was trying to use the facebook messenger problem. I got stuck at the point where FB suggests the creation of a quick node js server app to do the verification for web hooks.
At one point, the docs, recommend doing this command.
> curl --insecure -X GET
> "http://localhost:1337/webhook?hub.verify_token=<TOKENSTRING>&hub.challenge=CHALLENGE_ACCEPTED&hub.mode=subscribe"
I am getting error like this
in visual studio curl request.
write EPROTO 1975128920:error:100000f7:SSL routines:OPENSSL_internal:WRONG_VERSION_NUMBER:../../third_party/boringssl/src/ssl/tls_record.cc:242:
in direct curl
Forbidden
Ultimately, I did not find a direct solution and found out the problem was this line of code.
app.listen(process.env.PORT || 1337, () => console.log('webhook is listening' + process.env.PORT));
for some reason, on my computer, the default port was undefined. Yet, the code did not skip over and pick 1337. It continue to run the server on the undefined port, essentially not running it, I guess.
I changed the code to this.
app.listen(1337, () => console.log('webhook is listening' + process.env.PORT));
This solved the issue.
I have put my copy of the full code here - https://github.com/Jay-study-nildana/FBMessengerWebHook, if anyone wants to use it.
Also, look at this curl command
curl --insecure -X GET "http://localhost:1337/webhook?hub.verify_token=<token>&hub.challenge=CHALLENGE_ACCEPTED&hub.mode=subscribe"
I also think --insecure makes a difference because, by default, at least on my computer, curl keeps looking for the https version of endpoint, which is simply not available at that point of code development.
I'm running a next.js react app in a docker container. It's being composed with several other contains: one running Ghost (I'm using the API), one running mysql, and one running NGINX. I've got everything running in development mode.
It works perfectly when run using next dev. But when I run it by doing next build and next start, I start seeing errors like Error: getaddrinfo ENOTFOUND ghost-api when I try to make server-side HTTP requests to my Ghost API container. I'm not entirely sure what the issue is but it seems like there's some issue with how Node is making requests after being built. I've been digging through a lot of Docker/Node questions trying to figure this one out but haven't had any luck.
The entire project can be found here: https://github.com/MichaelWashburnJr/react-cms
The problem may exist in the environment variable that you are using. In both getGhostApi and getGhostApiKey function, you are using the environment variable.
In NextJs you'll have to specify a next.config.js in which you define the variables that you need for
Ex. next.config.js
module.exports = {
serverRuntimeConfig: {
// Will only be available on the server side
mySecret: 'secret',
secondSecret: process.env.SECOND_SECRET, // Pass through env variables
},
publicRuntimeConfig: {
// Will be available on both server and client
staticFolder: '/static',
},
}
You can also refer to the next documentation for the same.
https://nextjs.org/docs/api-reference/next.config.js/runtime-configuration
I'm not able to reproduce the error. How are you starting the frontend container in prod mode?
From the error it appears like you might be trying to start the frontend container or the frontend app as a separate process without starting it as part of the compose project. If that is the case, the name ghost-api won't be resolvable and you would get the Error: getaddrinfo ENOTFOUND ghost-api error.
I've changed the command key of frontend container as follows:
command: [ "yarn", "start-prod" ]
Changed the "start-prod" script in frontend/package.json as follows:
"start-prod": "next build && NODE_ENV='production' next start"
and everything worked as it worked in dev mode. I got some UNKNOWN_CONTENT_API_KEY error in both dev and prod mode but definitely there is no ghost-api name resolution error.
After cloning your repos:
$ grep -R ST_API *
frontend/.env.development:GHOST_API_URL=http://ghost-api:2368
frontend/.env.production:GHOST_API_URL=http://ghost-api:2368
frontend/src/constants/Config.js:export const getGhostApi = () => process.env.GHOST_API_URL || 'http://localhost:8000';
ghost-api is not a domain name: to make it work you need to edit your hosts file or (for a real production environment) to change http://ghost-api:2368 in frontend/.env.production file with the real deploy domain name.
If you are asking why you can't trust on docker compose networking, the answer is: you can, but only in the containers; while the front end will run in the browser of your application client, which is outside the containers.
Hope this helps.
It seems that Docker's hostname resolution does not work during build time. That is why ghost-api is not found.
Instead of referencing the other container by its name (ghost-api), on Mac you can try host.docker.internal. On Linux, using host networking during build worked for me:
nextjs-app:
build:
network: "host"
# ...
network_mode: "host"
This way, you can reference the other container using localhost.
I am executing a standalone nodejs script (no web server involved) that needs to fetch result from a third party api. The program uses 'node-fetch' to do the fetch(url) and I run it using node .\test.js from command line.
It fails when I am connected to our company network but works fine on direct internet. I have configured the proxy settings in npm and could see that npm config ls shows the correct values for proxy and https-proxy.
So the questions are:
1. Does running the test.js via node not pick the proxy config from npm?
2. How to make sure that the fetch(url) call goes through our proxy?
Thanks in advance
This worked for me, try using this :
https://github.com/TooTallNate/node-http-proxy-agent
The request formed will be similar to this:
fetch('accessUrl', {agent: new HttpsProxyAgent('proxyHost:proxyPort')})
.then(function (res) {
})
I'm building a really easy api and react-native application. The server works well (tested with PostMan) but the application doesn't call the server. It blocks when axios has to send the post request (see below).
I'm desperate :-( Loosing too mush time in it. Please, if you can help me...
Here is my code LogIn page. It dispatch the action creator (working with redux) giving email and password:
...
const LogIn = React.createClass({
submitLogin() {
// log in the server
if (this.props.email !== '' && this.props.psw !== '') {
if (this.props.valid === true) {
this.props.dispatch(logIn(this.props.email, this.props.psw));
} else {
this.props.dispatch(errorTyping());
}
}
},
...
email and password are weel retrieved and sent to the action creator:
import axios from 'axios';
import { SIGNIN_URL, SIGNUP_URL } from '../api';
// import { addAlert } from './alerts';
exports.logIn = (email, password) => {
return function (dispatch) {
console.log(email);
console.log(password);
console.log(SIGNIN_URL);
return axios.post(SIGNIN_URL, { email, password })
.then(
(response) => {
console.log(response);
const { token, userId } = response.data;
dispatch(authUser(userId));
}
)
.catch(
(error) => {
console.log('Could not log in');
}
);
};
};
const authUser = (userId) => {
return {
type: 'AUTH_USER',
userId
};
};
...
The three console.log() before axios show the data in the correct way. SIGNIN_URL is exactly the same I use in postman. ...but axios doesn't call.
Just to give all the cards, this is my store:
import thunk from 'redux-thunk';
import { createStore, compose, applyMiddleware } from 'redux';
import { AsyncStorage } from 'react-native';
import { persistStore, autoRehydrate } from 'redux-persist';
import reducer from '../reducer';
const defaultState = {};
exports.configureStore = (initialState = defaultState) => {
const store = createStore(reducer, initialState, compose(
applyMiddleware(thunk),
autoRehydrate()
));
persistStore(store, { storage: AsyncStorage });
return store;
};
There's no error message in the debugger (but the one given by the axios call ('Could not log in')
I'm on windows 10, with:
"axios": "^0.15.3",
"react": "15.4.2",
"react-native": "0.38.0",
"redux": "^3.6.0"
The call fails even when I prepare a simple GET call and the server is supposed to give back a simple message (tested with postman and browser):
exports.test = () => {
return function () {
return axios.get('https://localhost:3000/v1/test')
.then(
(response) => {
console.log(response);
}
)
.catch(
(error) => {
console.log('error');
}
);
};
};
Last, I tryed also to modify the call adding a header as the following, because the api is coded to accept json:
const head = {
headers: { 'Content-Type': 'application/json' }
};
exports.test = () => {
return function () {
return axios.get('https://api.github.com/users/massimopibiri', head)
.then(
(response) => {
console.log(response);
}
)
.catch(
(error) => {
console.log('error');
}
);
};
};
but even this didn't work. hope somebody can help me. Other similar issues didn't.
The solution came from a different source, but I post it here to help others looking for the same issue. Basically I used Android AVD (emulator) to build the application. But the emulator is in fact another machine, and that's why it couldn't call the localhost.
To solve the probleme, I had to send the request in the following way:
https://10.0.2.2:3000/v1/test
instead of:
https://localhost:3000/v1/test
if u are using mac this solution worked for me.
I am using React Native with Android Simulator ADV. Nexus Api 27
axios.get('http://192.168.1.21:8686/api/v1/test')
.then(response => console.log(response))
.catch(err => console.log(err));
where the ip 192.168.1.21 is from system preferences > Network > Advanced > TCP/IP > IPv4 Address
I also tested axios.get('http://10.0.2.2:8686/bec/api/v1/test') where 10.0.2.2 is localhost from virtual machine to the computer but not worked.
Your Emulator is a device on it's own that is not running on the same IP(localhost or 127.0.0.1) as your web browser, postman or your server.
In order to make request to your server from your emulator you need to access your server via your computer IP Address:
On windows get your IP Address by running ipconfig on the command prompt
On Unix terminal (Linux, Mac OS) run ifconfig to get your IP Address
Instead of http://localhost:port you should use http://your_ip_address:port
I didn't test it on Linux, Mac OS but its working perfectly on windows!
change from localhost to your ip
add http://
http://192.168.43.49:3000/user/
Another solution is to create a hosted network on the localhost computer with these commands from admin cmd:
netsh wlan set hostednetwork mode=allow ssid=wifi_name key=wifi_password
netsh wlan start hostednetwork
Connect your device to the computer's hotspot then get the computer's ip by running:
ipconfig
Now get the IPV4 address and put it on the app's axios/fetch url,
axios.get('https://192.168.137.1:3000/api')
.then(
(response) => {
console.log(response);
}
)
.catch(
(error) => {
console.log('error');
}
);
and it should now work!
I found another solution to the axios.get not working in react native problem:
Problem:- Object not visible and error: unhandled promise. Network error
Solution:-- Use below command:
=>>> npm install -g --save axios
instead of npm install --save axios i.e. Use -g.
And also check whether your emulator is having internet connection.
If your emulator is not having internet connection and is showing error such as: DNS probe finished bad config., then
STOP ANDROID STUDIO Emulator and run these two commands in terminal
1.>> C:\Users\Admin\AppData\Local\Android\sdk\emulator\emulator.exe -list-avds
My Output:
Pixel_XL_API_27
After this step, you will get the name of avds.
example:- Pixel_XL_API_27
Now run below command:-
2.>> C:\Users\Admin\AppData\Local\Android\sdk\emulator\emulator.exe -avd Pixel_XL_API_27 -dns-server 8.8.8.8
I have also faced similar issue and I am using Expo CLI for building and running my React Native application. My backend Express API are also running on same machine. So in my case Axios call is executing from inside Android Virtual Device emulator due to which localhost call is failing. So instead of using localhost I have used IP address and it worked!
If you are using expo client, please check hotspot IP address like 192.168.x.x (in my case ip is of this type) something on Metro Server Page.
If you are not using expo, then check your IP address using following commands :
ipconfig /all (On Windows)
ifconfig -a (OnLinux/Mac)
And then in axios api call, use http://192.168.x.x and if you are using https then use https but mostly for development purpose, you can go with http. But make sure in production environment, it is always good to use https with your domain or subdomain for providing additional security.
Alternate way to solve this issue if connecting a different way doesn't work. As others have said, because the phone is a different machine you can't use localhost. But you can use a tunnel. This will give you a url (open to the whole internet) that replicates your localhost.
Install the package localtunnel globally (yarn global add localtunnel)
Make sure your server is running, and note the port (for example, http://localhost:8081)
In another terminal/command prompt, run the localtunnel command (for me, this was npx localtunnel --port 8081). This will create your server that you can hit from the open web.
You can now replace the url in your react-native app with the url from the console
I hope this helps someone.
For me 'https://10.0.2.2:3000' was not working. I tried to map the localhost:3000 to a URL by ngrok and used that URL
./ngrok http 3000 (running this command on terminal will start session with global URL mapped to localhost port 3000)
Remeber,For this you should have ngrok installed on your system
Try Turning off your firewall it worked for me
Adding Cors to my Express App worked for me.
I did an npm install cors in the terminal in my Express server folder.
And then I just randomly added the following 2 lines of code to my Express server.js file:
const cors = require('cors');
app.use(cors())
Oh and then I specified the exact port in all my axios requests like below:
axios.post('http://localhost:5000/api/users/login/')
My problem: some ports were working for an expo app while the desired one 4000 wasn't. I wondered why. After much time researching, I found the workaround on Linux Mint: the Firewall.
Make sure you are connected over the same network and configured your server properly.
Go to Menu and search for Firewall in the machine hosting your server.
Turn status off or add a firewall rule through the plus icon at the left bottom corner.
Select Simple configuration and put your port there.
Done!