Question 185937 in Javascript Question posted in
A very good W3school tutorial can be found here.

Javascript – How users can access / save data from SQL server through host authentication / connection

I have deployed a react project within an intranet.
Other PCs can access the page through my IP address (like 10.xx.101.xx:4000/page)

Since the data of the page is from SQL server which access through axios / ODBC / express.
The page will request data from SQL server every time it is refreshed (F5).

For this setting, my pc (host) can show all data successfully.
However, other users are not able to capture the data and pop up an error. How can I handle this issue ? Many thanks !!

useEffect(() => {
        async function getData() {
            try {
               let res = await axios({
                    url: 'http://localhost:4000/data',
                    method: 'get',
                    timeout: 8000,
                    headers: {
                        'Content-Type': 'application/json',
                    }
                })
                if(res.status == 200){
                    // test for status you want, etc
                    console.log(res.status)
                }    
                // Don't forget to return something   
                return res.data
            }
            catch (err) {
                console.error(err);
            }
        }
        
        getData()
        .then(res => {setSourceData(res)});
    },[])

package.json setting

"proxy": "10.xx.101.xx:4001"
Tags:

2

Answers


  1. 0

    The issue is that you’re making the axios request to http://localhost:4000/data. localhost refers to the same machine from which the request is being made. This works fine on your machine (the host) because the server is running on the same machine. However, for other users on the network, localhost refers to their own machines, not your host machine.

    In order to fix the issue, you should replace localhost with the IP address of your host machine where your server is running.

    The axios call should look like this:

    let res = await axios({
    url: 'http://10.xx.101.xx:4000/data',
    method: 'get',
    timeout: 8000,
    headers: {
        'Content-Type': 'application/json',
    }
})

    Be sure to replace 10.xx.101.xx with the actual IP address of your machine. After making this change, other users on the network should be able to retrieve data from the server running on your machine.

    Also, please note that your package.json setting "proxy": "10.xx.101.xx:4001" won’t have any effect here. The proxy setting is used by the development server to avoid CORS issues during development, but it doesn’t change where axios requests are sent from the deployed application.

    Login or Signup to reply.
  2. 0

    Joey points out the problem why that happens. In order to "make" your localhost public, one fast way is to use ngrok to expose your localhost to public internet.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search