Can't connect /api calls to Web Service Express, from my Static Site

[SlavkoPar]

Hi,
I followed steps from tutorial, but I can’t connect /api calls to my express Web Service.
My project is at:

GitHub - SlavkoPar/Support-MERN: Support Knowledge with MongoDB, Express,...

Instead of redirection, I added 2 env variables:
REACT_APP_HOST: …
REACT_APP_PORT: 4001
so i get a call:
https://support-knowledge.onrender.com:4001/api/test
but I always get the response:
net::ERR_CONNECTION_TIMED_OUT

In my Web Service shell I tried:
curl -X POST 127.0.0.1:4001/api/test
and received the response: ‘Welcome to GeeksforGeeks’

Do you have any suggestion?

Regards!

[al_ps]

Hi,

You didn’t mention which tutorial you’re following, but there are a few issues here:

• Render doesn’t accept custom ports from outside Render. https://support-knowledge.onrender.com:4001 will not work.

• https://support-knowledge.onrender.com looks like a Static Site, so I assume you also have a backend Web Service. The Static Site will be making calls from the client side, so it would need to reference the backend/API on its own URL, e.g. https://your-backend-api.onrender.com/api/test

• You seem to have set up a “redirect” for the Static Site to handle client-side routing. This should probably be a rewrite as covered in the docs: https://render.com/docs/deploy-create-react-app#using-client-side-routing

• You can also use rewrites to achieve what you’re trying to do with hitting the backend with a frontend URL. Add a source of /api/* a target of https://your-backend-api.onrender.com/api/* with the action as rewrite.

Alan

[SlavkoPar]

Hi Alan,
Thanks for suggestions.
My site is: https://support-knowledge.onrender.com/
I found solution for my /api/* calls, setting my Web Service link to ‘Rewrite rules’:

/api/*
https://support-knowledge-service.onrender.com:5000/api/*
Rewrite

Best Regards !

[al_ps]

Having that port number in the destination URL won’t work, you’ll need to remove that.

Alan

[SlavkoPar]

Hi Alan,

It works!
My Express Web Server listen on port: 5000
How otherwise will my ‘/app’ call would ended on this port?
Regards,
Slavko

[al_ps]

The port you specify is only for internal communication between the Render proxy and your service instance (or between service in your account). Public URLs only respond to HTTPS, port 443, which doesn’t need to be specified as it’s the HTTPS default.

Alan

[SlavkoPar]

OK, thanks, it works.
I learned something.
Regards!

[atom19-i]

Hi @SlavkoPar , could u please tell how were u able to remove deceptive site ahead warning from your website? When i deployed my service onrender.com, after few minutes i started getting this warning and i am not sure what caused it as the project was for purely personal project purpose… any advise would be much appreciated.

Thank you in advance

[SlavkoPar]

@SlavkoPar

My site is: https://support-knowledge.onrender.com/
I found solution for my /api/* calls, setting my Web Service link to ‘Rewrite rules’:

/api/*
https://support-knowledge-service.onrender.com:5000/api/ *
Rewrite

Best Regards !

Hi atom19-i,
I don’t receive any of warnings on my site:
https://support-knowledge.onrender.com

I just set my Web Service link to ‘Rewrite rules’:

/api/*
https://support-knowledge-service.onrender.com/api/*
Rewrite

and

/* index.html Rewrite

Best Regards !