Search code examples
node.jsreactjsflasknetwork-programmingserver-side

Connecting React to two separate servers


I'm currently running two servers, both on my local machine. One is Spring, the other is Flask. The Spring server handles major business logic of my application, whereas the Flask one handles light database access operations. Additionally, I have a React Node.js server that interacts with both of these. I am considering merging the Flask server into my Spring server to solve this problem, but I am curious to know the correct way of connecting to two servers.

I am using a React proxy to use the port of the Spring server, and I'm making my calls on that, whereas my Flask server I connect to with 'http://127.0.0.1:5000/' via fetch. This has been working great when accessing the site from the hosting PC, but when trying to access it remotely via port forwarding, the Flask server cannot be accessed. This makes sense, because React is looking at the localhost of that machine.

My question is: other than merging the two servers, how can I connect to both of them remotely like this? Is there something big I am missing? I am of course happy to provide all files or information necessary, and as this is my first time doing a project like this, I hope what I've explained is sufficient.

EDIT: Just as an aside, I think some of this is due to Flask's default behavior of not allowing outside connections. I will update this more if anything comes of my tests.

EDIT2: I tested this even more and found that the Flask server access works great when the react proxy points to it, whereas the Spring server fails. The opposite behavior I have now. So it isn't about Flask default behavior, but the fact that React can only proxy into one server at a time.


Solution

  • I have got this working, and a good answer was posted on SO already, just under different phrasing, so I didn't find it. I will link the post here!

    Multi server solution

    Specifically, I just wasn't familiar with the setupProxy.js file, and this is the solution to this problem.