I am running a Node server locally on port 3000. I am using axios in ReactNative app to get and post data from the server.
I am setting the baseURL as:
const axiosObj = axios.create({
baseURL: 'http://localhost:3000'
});
This is not working and resulting in Network Error. However, if I use baseURL like this then it works
const axiosObj = axios.create({
baseURL: 'http://172.XX.X.X:3000'
});
I have also tried with baseURL:http://127.0.0.1:3000 which also doesn't work
I really need it to work with http://localhost:3000 or http://127.0.0.1:3000 without having to provide the actual IP address. Help would be appreciated.
React Native app run on other device, so you can't access localhost or http:127.0.0.1 directly, use
adb reverse tcp:3000 tcp:3000
for react-native app that run on android.
for ios, there is no way to do port reverse.
Related
I am setting up a reactjs application on port 3000 as well as a nodejs API server on port 3500 on the same box on the internet. Assume the box has a domain name example.com, and I am using nginx in reverse proxy to receive the end users over https, and internally direct it to the port 3000 of the reactjs server.
On the react code, while calling axios API for a get command, which of the following should I be using:
localhost:3500
http://localhost:3500
https://localhost:3500
example.com:3500
http://example.com:3500
https://example.com:3500
Few tests I did:
Access from my browser the reactjs application successfully as example.com (nginx does the mapping to port 3000)
Using https://reqbin.com/ I was able to access the nodejs server API and get the correct result using: http://example.com:3500/users
Using https instead of http causes an error: SSL connection error Error code: 10035
If end user is supposed to connect over https to the react server, then the react server as well as the nodejs server should be running in https mode, or the browser will block the request and it will never reach the server.
Here is how to:
Run the react server in https mode:
Change nginx reverse proxy configuration to be:
proxy_pass https://localhost:3000;
Changed the URL for the nodejs server that axios is calling from http://localhost:3500 to https://example.com:3500
After npm run build, and upload the build directory to the server, run the following commands:
su
serve -s build --listen 3000 --ssl-cert "/etc/letsencrypt/live/example.com/fullchain.pem" --ssl-key "/etc/letsencrypt/live/example.com/privkey.pem"
Run the nodejs server in https mode:
Change the code of server.js with the following:
const https = require('https');
const fs = require('fs');
const options = {
key: fs.readFileSync('/etc/letsencrypt/live/example.com/privkey.pem'),
cert: fs.readFileSync('/etc/letsencrypt/live/example.com/fullchain.pem')
};
https.createServer(options, app).listen(PORT, ()=>{
console.log(`Server running https on port ${PORT}`)
});
Run the following commands:
su
node server
I've ran into a problem where when I host a server with webpack on my local network (Webpack default I suppose), on the laptop that the front-end server is being run, everything works when connecting through localhost or the IPv4. When trying to connect to the website through IPv4 on my desktop I get this error.
createError.js:16 Uncaught (in promise) Error: Network Error
at createError (createError.js:16)
at XMLHttpRequest.handleError (xhr.js:84)
My CORS:
const cors = require('cors');
app.use(cors());
I set CORS before any APIs are created. Also my front-end is being ran my webpack since I'm using CRA. Webpack running front-end on network:
Try Using below code :
app.UseCors(builder =>builder.WithOrigins("http://example.com").AllowAnyHeader());
replace http://example.com with the request origin domain address .
try adding app.use(cors({origin: 'you localhost eg https'}))
this will allow only your localhost to access in your server
Fixed it. Hosted my Node JS server on my network IP instead of my localhost aswell as configured all front-end requests to the network IP. Works like a charm.
app.listen(9999, '192.168.1.226', () => {
console.log(
'Arclight back-end is online.\n',
'',
);
});
I am trying to develop a React Client that consumes the Frappe REST API but on each request I am getting a CORS error. according to the community forum, I have to edit the Nginx conf to allow CORS requests but I am facing this error on my machine (localhost) and the dev server is not Nginx so how can I allow CORS requests on localhost?
// site_config.json
{
// allow all origins
"allow_cors": "*"
// restrict to Origin:
"allow_cors": ["http://demo-site.com"]
}
Reference:
https://github.dev/frappe/frappe/blob/07af98255b6ac9bb3b277fc1b9d6999a86a90e9f/frappe/app.py#L159
I don't think you need to configure CORS, especially during local development.
Let's say your React client is running the port 8080 and Frappe server is on 8000. You can proxy all your requests from localhost:8080 to localhost:8000.
In production, you can generate the static assets and put them in the www folder of the Frappe app.
Add "allow_cors": "*" to common_site_config.json and restart bench
I have a React frontend that uses jwt to authenticate with the laravel backend. The backend works and is connecting just fine using laravel views, but when I try to proxy a request from React, it gives me a Connection Refused error.
Proxy error: Could not proxy request /api/register from localhost:3000
to http://localhost:8000/ (ECONNREFUSED).
Connecting to http://localhost:8000/api/register works normally. And sending a POST request with Axios also works normally and returns the token json. But when I proxy it with node, it doesn't work.
in my package.json code is
"proxy": "http://localhost:8000",
Please anyone help me. how to fixed it?
I think you should add "/" after the port number in package.json file
"proxy": "http://localhost:8000/"
Please check these points and solve your problem:
Please check your ip of backend server.(https://127.0.0.1:3000 or http://127.0.0.1:3000)
Please check your backend server is running or stop if stopped then start ypur server.
Please check protocol http or https used in your backend server.(https or http)
I hope with the help of these points you can solved your problem which is facing by you.
You need to run both of the local host (3000 and 8000) in different terminal. For example, run the backend server in os(windows's) command prompt cmd and frontend server in vscode terminal.
I am hosting a meteor app on an Ubunu Linux machine. The app is listening on port 3000. If I use a webserver, like NginX and forwards the HTTP requests from port 80 to 3000 I can browse to the server from the outside and see reach the app. However, when I try to access the app directly at port 3000, i.e. browse http://myhost:3000 it just tries to connect and nothing happens.
I have made sure that all firewalls are down and that the app is listening on all interfaces, i.e. 0.0.0.0:3000, so that is not the issue.
To verify that port was actually reachable, I created a simple node js webserver:
var http = require('http');
http.createServer(function (req, res) {
res.writeHead(200, {'Content-Type': 'text/html'});
res.write('Hello World!');
res.end();
}).listen(3000);
Now browsing to the the sever, I can see "Hello World!". So obviously this works so why I can not reach meteor has nothing to do with firewalls or unopened ports.
Thus it seems that there is something strange when trying to access a meteor app directly at port 3000. But why? I use the following environment variables:
export MONGO_URL=mongodb://localhost:27017/meteor
export HOST=myhost
export PORT=3000
export ROOT_URL=http://myhost
So what am I missing? Ports are open and I can see that the node process instance is listening on port 3000 when I run netstat -tulpan
I was using the force-ssl meteor package which makes a redirect back to the ROOT_URL without port number. So solution is to remove the package to make it work with a custom port.
I was discussing the solution on the meteor forum where I got the solution:
https://forums.meteor.com/t/can-not-access-meteor-app-without-passing-through-nginx-server/40739/11