On my main PC I have a react app running http://localhost:3000, aswell as a nodejs and express API http://localhost:3001, so my react app requests the data from the API that is running on the same machine and it works fine, it loads up the web app and succesfully makes the http requests. I now want to visit the react app from a different computer, so when I vist my react app, using my main computers internal IP, the react app loads up perfectly fine, but the API request fails. In console I get GET http://localhost:3001/today net::ERR_CONNECTION_REFUSED, when making my axios request I dont refer to the API as http://localhost:3001 I use the public IP of my computer instead of localhost, I also have went into my router and forwarded ports 3000 and 3001. So it looks to me like even when I'm on a different computer, the react app still thinks it is on localhost. How can I fix this ?
When I port forwarded ports 3000 and 3001, I forgot to change the protocols from tcp to tcp/udp. It works fine when I use both TCP and UDP to port forward
I think you are going CORS (cross-origin resource sharing ) issue. I mean you have this error because your server (NodeJS) an your App(React) are running on the same computer. So you need to enable CORS :
open your package.json file and add this property :
"proxy":"http://localhost:3001"
2)In your React App instead of making your requests to fetch("http://localhost:3001/users") you'll send your requests like this fetch("/users")
Click here to read more
Related
I was working in a project and sudden noticed that while react is calling node api, i can see port number also in console network, which i think is not secure.
So is there any tool, settings whcih we can use to hide ports from api calls.
I am using apache as server, node api and react frontend.
Thanks
Tried virtual host settings but not worked
I have a backed app written in typescript which has an express server running on port 5001. I have a front end app written using react. Both these apps are hosted on same machine.
The react app needs to fetch data from the backed app using the port 5001 being served by express server.
The machine has an IP of 10.250.1.4 for example. So from the host machine, I could use localhost:5001 or 10.250.1.4:5001 in the axios requests and both will work.
The react development server in this case is running at Port 3000 for the front end app.
When another client machine, running on 10.250.1.6 for example, tries to access 10.250.1.4:3000 from its browser, the react app is sent to the client. In this case the axios requests from the client to backed server will only run if the axios is looking at the 10.250.1.4 rather than localhost.
I wish to write the axios in front end app in a way that I don't have to specify the ip of the express server. Both the front end and backed app will always be hosted at same machine.
Is there a way?
Thanks.
I think I'm doing something completely the wrong way.
I have an Nodejs server running that read in a DB and serve with express some data via http locally (it has to only be accessed locally). It sends the data on localhost on some port (8080 for example). Then I have an angular app on the server that get these datas from an http request on localhost:8080 and display them. The angular app runs locally on localhost:4200.
I was building the entire stuff on my computer and that was working perfectly (I have no problem with CORS). Then I deployed it on a server, and I accessed it via ssh port forwarding. Basically I forward localhost:4200 on the server via ssh on my local computer on localhost:8090.
And my problem is that, when loading and executing the angular app in my browser via port redirection, it's doing a get request to localhost:8080. So it's trying to communicate with the localhost it's running on, which is the client itself.
If you understood my spaghetti situation, there is actually a dirty solution : redirect localhost:8080 on the server to localhost:8080 on the client.
Is there any way to do the get request server side and not in the client's browser so that localhost correspond to the server? Is there a better way to do what I'm trying to do?
I can sum up by : How can you access another local service on localhost on the server with angular app since it executes in the client browser and localhost will refer to client localhost.
Try to use any web server (such as nginx or apache2 or etc.) in your server and make use of proxy and reverse proxy with your node application, it will work
angular2-router-and-express-integration
So I have a Nginx configured to forward requests trough port 433 (SSL) to localhost:3000 where react is running, react shall in turn post requests to a Node.js app running on the same VPS (localhost:8080) to make a stripe payment.
Everything work fine so far. The frontend is rendering, SSL working.
But when the i run axios.post with the payment data from React it never reaches the Node (as far as my logs tell me).
I have CORS setup in node to accept a bunch of "localhost" variants and the actual domain itself.
Why is this not working?
Thanks!
I should have been poitning the React app to the Url of the api, not its local adress on my VPS sorry.
I have been developing a standalone app for an event exhibition. This comprised of a backbonejs frontend with a node express server backend for saving data. At the event this will run over localhost fine but how can I make the express server be accessed via normal http. I.e the backend responds when app is added to my webserver for client review
Any ideas.
G
Servers available at localhost should respond to http requests if your firewall is open. If you are behind a router, you need to configure it to forward requests to your machine. NAT is the simplest (and least safe) way.