Unable to send requests to server hosted on render.com

Support
,
1

I’m trying to connect my express server hosted on render.com
url -https://ytidexpressserver.onrender.com
to connect with my react app hosted on netlify,
url - /https://monumental-sunburst-e0995c.netlify.app/

React App - GitHub - naidu-kotha/You-Tell-I-Do-Client
Express Server - GitHub - naidu-kotha/You-Tell-I-Do-Server

I have created a netlify.toml file and added the backed url in it, when I deploy the netlify build the home page is showign cannot GET/

[[redirects]]
  from = "/*"
  to = "https://ytidexpressserver.onrender.com"
  status = 200
  force = true

If I include the netlify url in the “from”, the page gets rendered but throws error ("AxiosError: Request failed with status code 404\n) when a request is sent

[[redirects]]
  from = "/https://monumental-sunburst-e0995c.netlify.app/"
  to = "https://ytidexpressserver.onrender.com"
  status = 200
  force = true

I have locally tested the render.com express server by including the url in proxy of my package.json file and every functionality is working properly.

Please help me fix this issue.

2

@naidu A few things don’t look right here…

  1. If you navigate directly to what you have hosted at https://ytidexpressserver.onrender.com you will see that it presents an error of Cannot GET /.

    So that error is simply what your express server app on render returns when a GET request is made to it at the root.

    I’d imagine you’ve only configured it to handle various API requests/responses, so if you’re expecting it to return something when someone is visiting it, you would need to edit the app accordingly.

  1. The first redirect that you show is configured to proxy EVERYTHING to your site on render.

    As per 1. visiting render directly returns Cannot GET /

    You would expect that visiting the root of the Netlify site would proxy to the root of the render site and thus show Cannot GET /.

  1. The second redirect that you show has a / as the first character in the from value.

If you’re only trying to proxy certain API requests through to render, then you should adjust your redirect to provide some kind of api prefix to route the requests.

E.g.

[[redirects]]
  from = "/api/*"
  to = "https://ytidexpressserver.onrender.com/:splat"
  status = 200
  force = true

Then in your front-end react app you would ensure your API requests are adjusted to contain /api/ in their paths.

1 Like
3

Hey, is it necessary to have /api appended before every endpoint ? what if i dont want to do so , is there any way to describe that to netlify?

4

@fuzzyzaid Yes, specify something different.

Ultimately you’re just specifying which routes are going to where.

Nothing forces you to use api as the prefix, and nothing forces you to use a prefix at all, it’s just a sane way of defining it with a single rule, which also keeps your api routes from mixing in the same space as your page routes.

If you don’t want to use a prefix you would specify each endpoint route independently.