Search code examples
javascriptnode.jsreactjsfetch

Why is fetch not working on my mobile browser?

I made the simplest server in NodeJS, which stocks strings in a database when requested "/add" and sends to my front (ReactJS) all of those strings "/getall". I display them using the map function. Everything works as expected. But, my information is displayed only on Desktop browser, not on mobile browser (Safari or Chrome).

Web

enter image description here

Mobile

enter image description here

async fetchFromDatabase(){
   let url = "http://localhost:8080/getall"
   let c = 0
   await fetch(url).then((response) => {
       response.json().then((data) => {
           let values = []
           for (let i in data) {
             values.push(data[i].post)
             c++;
           }
           this.setState({
               posts: values
           })
       });
   });
 }

To fill in my array, I do this:

let allPosts = this.state.posts.map(item => (
  <div key={item} className="center-div">
    <p className="box">
      {item}
    </p>
  </div>
))

To render the information, I do this:

<div>
  {allQuestions}
</div>

Fetch is definitely not working for mobile. Has anyone experienced something like this?

Solution

  • When you open this page on your computer, the http://localhost:8080 url in fetchFromDatabase will connect to the local webserver on your computer, and it will work. But when you open the same page on your mobile device, the same code with localhost in the url will try to connect to your mobile device's local web server, which is probably not existing.

    Try to replacing localhost with your computers local IP address, and if you are connected to the same network with your mobile phone, it should work.

    Also, as @JonasWilms suggested, you can replace the full URL with "/getAll", so fetch will send the request to the host in the base url.