How to deploy react app with 2 different ports

Question

I am trying to serve a build on my network with 2 ports.

1 for frontend which is localhost:3000 and 1 for server with localhost:3001

I currently have the build for my frontend, but the problem here is i wanted to access the localhost:3001

On localhost:3001 which is for development and not for deployment . As you can see in the image, I can communicate with localhost:3001

But when i try the **BUILD FRONTEND WITH 192.168.254.100:300 ** It can't find my server (port 3001)

EDIT

I'm successful on solving the first problem. But, another problem is i can't access the site on using a mobile phone without cors extension from chrome. And as well as the COOKIES ARE NOT SETTING in order to be authenticated.

Answer 1

This problems occurs due to the CORS policy. Basically, when you send a request from a URL that is different from your server URL, you'll be blocked. For example, if you communicate to your server using its own URL (localhost:3001), it works fine. However, if you do that from your frontend URL, CORS policy will block that. Therefore, in your server, you have to add Access-Control-Allow-Origin in your HTTP response. In Express, you can add the cors middleware.

First, go to your server folder and install cors:

npm i cors

In your entry point file of your server (server.js, index.js, or whatever), insert this line:

app.use(cors()); //This allow any websites to communicate to your server

If you want to only allow your frontend url to communicate and not others:

app.use(cors({ origin: "http://192.164.254.100:3000" })

app is of course from:

const app = express()

Restart the server and it should works fine.