Proxy error from backend api to front end react app - node.js

I keep getting this error, I have used node & express at the back end and react at the front end
'Proxy error: Could not proxy request /api/profile from localhost:3000 to http://localhost:4321/.
[1] See https://nodejs.org/api/errors.html#errors_common_system_errors for more information (ECONNREFUSED).'

Did you add a proxy inside the react package.json? This error usually happens when you dont add the proxy.

your proxy's port should be the same as that of your backend server's listening port.
for e.g in your case set the listening port of you backend sever to 4321.

Related

heroku send request from a front-end app to a back-end one

I created an hapi.js backend app on heroku. After a bunch of problems all works well. Now, I want to create a frontend app with react.js, but I have a problem:
const server = Hapi.server({
port: process.env.PORT,
host: '0.0.0.0'
});
To define the port of the backend I've the enviroment variable, so I don't really know its value. So how can the react app knows the correct port of the server where to connect?
You actually don't need to know the port number. You can use the default port which is 80 for HTTP and 443 for HTTPS.
According to the heroku docs:
The contract with Heroku is for the process to bind to a port to serve requests. Heroku’s routers are then responsible for directing HTTP requests to the process on the right port.
Which means heroku listens to port 80 for HTTP and port 443 for HTTPS by itself.
References:
https://devcenter.heroku.com/articles/runtime-principles#web-servers
https://stackoverflow.com/a/51572239/5045878
https://stackoverflow.com/a/54200996/5045878
I would say you don't need to know the port because all your requests will be done to https://hapi.yourdomain.com, and your front will be served to https://yourdomain.com
Edit:
In heroku this is how you define the port:
const port = process.env.PORT || 8000
Heroku will provide the environment variable you need (that changes every time you deploy your app)
Then your react app don't need to connect to a specific port, just access your endpoints like this :
https://back.domain.com/your/endpoint

Issue accessing my loopback API on Heroku

I have created a fullstack app - Loopback is being used as the backend API and React as frontend app.
I was expecting to host my app on Heroku. I can successfully start the app (hosted on port 3000) and the client React is correctly displayed. However, when I try to send request to the API using this url http://localhost:3000/api/, I receive this error message :
DOMException: Failed to execute 'open' on 'XMLHttpRequest': Invalid URL
Any ideas?
Thanks-
Your app won't be running on port 3000 when it's deployed to Heroku - you need to use the random port that it's assigned. Also, your React front end should then use .herokuapp.com instead of localhost:3000. The React code is running on the client computer so it needs to make the request over the internet.
Because Heroku generate random port number, it's necessary to create 2 app: front end client and back end API.

Vue Js public Websocket blocked by CORS policy

I've created a application with Vue and Node js but I get a trouble "CORS" when I try to connect to a public websocket from "http://localhost".
Project structure
Error log
I believe the cause of this problem is a trying to connect via http to a https server.
Any idea to solve this problem in localhost ?
Try installing this node package named cors-server that will start a web server on a given port that will proxy any request received and add CORS headers to it.
To start the server simply call it from the command line and supply a port number
cors-server <port>
After that, any requests sent to http://localhost:[port] will have Access-Control-Allow-Origin: * on the response.
e.g:
POST http://localhost:3005/http://www.google.com
Hope this helps!.
The real problem in this case, is to try to connect to other domain from the client side and the server do not allow "Access-Control-Allow-Origin".
The best solution for this question is follow the arquiteture of project bellow:
https://github.com/Tucsky/SignificantTrades
In resume, implement conection websocket in server side and expose a local websocket in the client side.
In my case, Node and Vue js.

Not able to run nodejs project on google app engine

I have just started google app engine with nodejs. I have created a local project that works fine on my machine. And If I hit
http://localhost:7000/services/user/getuser
it returns a json object.
I have deployed the same project on google app engine using
gcloud app deploy
Now when I hit
http://help-coin.appspot.com/services/user/getuser
it is showing
Error: Server Error
The server encountered a temporary error and could not complete your request.
Please try again in 30 seconds.
I have checked the logs on server
Load controllers from path '/app/app/services' non recursive.
--------make-runnable-output--------
undefined
------------------------------------
Up and running on port 7000
Loading controller 'UserService.js'.
No error on the server side. What is this issue? Am I missing something?
Here is the project that I have deployed https://github.com/ermarkar/nodejs-typescript-sample
Your app must listen to 8080, not 7000 or any else port.
See this.
Listening to port 8080
The App Engine front end will route incoming requests to the appropriate module on port 8080. You must be sure that your application code is listening on 8080.

Node express app with socket.io not working after deploy on heroku

Hello I'm trying to deploy an express app that uses Socket.io for communication with the node server it's hosted on.
First problem : the server couldn't find the socket.io node module
somehow... even though it gets resolved on localhost.
We then switched to loading the socket.io client side through the socket.io cdn.
But we are getting this being spammed in the console :
Failed to load resource: the server responded with a status of 404
(Not Found)
https://pictionar-e.herokuapp.com/socket.io/?EIO=3&transport=polling&t=Lbg7iEM
From this error is looks like socket.io is trying to communicate over polling ? But I don't get why.. heroku supports websockets. Could https cause things not to work anymore?
Server side we've got the socketio/express server setup like this :
app=express();
server=require("http").Server(app);
server.listen(port,function () {
console.log("Server started at port: "+port);
});
io=require("socket.io")(server);
On localhost everything works fine but when on heroku the socket.io doesn't work, while the express server does its thing perfectly fine...
Note: we are using the port that gets assigned automatically by the heroku environment

Resources