0
212
ViewsHow to deploy react app with 2 different ports
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.
1 answers
Answer question0
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.