I'm new to ReactJS. I have developed an app consisting of a table with several columns and I have been successful in rendering my application on localhost. My front-end is accessible from http://localhost:3000 and back-end from http://localhost:8000. I'm using MongoDB as database.

Now I want to make it possible for my network users to see my app, therefore I run my code on a windows server whose IP is 10.68.10.20. Now when my network users open http://10.68.10.20/3000 on their PCs or laptops, they are able to see my application (and the table itself), but the content of my table (the content of the database) is not visible for them.

I see this error in the console:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:8000/api/v1/users?search=. (Reason: CORS request did not succeed). Status code: (null).

So what's wrong? What changes should I make in my app to be visible for network users?

CodePudding user response：

Judging by the error message, your app is attempting to make a request to http://localhost:8000/api/v1/users?search=.. Probably because your front-end has http://localhost:8000 back-end address hardcoded somewhere. Make sure that your backend is available on port 8000 to your network users at http://10.68.10.20:3000, and then change it in your app.

In production apps, such addresses would usually not be hard-coded into the app itself, but configured using environment variables that would be applied at build/bundled step for a front-end application.

Edit: as you've specified that you're already using environment variables with .env files, what you typically do is:

• Create a different file (name something like .prod.env) to use for production deployment
• Specify all the environment variables that your app uses in it, so for example you would put REACT_APP_API_URL=http://10.68.10.20:8000/api/v1 in it
• When you deploy your app for other users, use this file instead of the .env file you use for local development

This way you have an easy way to switch between configuration for local development and production, and can even launch the two environments simultaneously.