Почему fetch не работает в моем мобильном браузере?

Question

Я сделал самый простой сервер в NodeJS, который заполняет строки в базе данных по запросу "/add" и отправляет на мой фронт (ReactJS) все эти строки "/getall".Я отображаю их с помощью функции map.Все работает как положено.Но моя информация отображается только в браузере рабочего стола, а не в мобильном браузере (Safari или Chrome).

Интернет

Мобильный

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
           })
       });
   });
 }

Чтобы заполнить мой массив, я делаю это:

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

Чтобы отобразить информацию, я делаю это:

<div>
  {allQuestions}
</div>

Fetch определенно не работает для мобильных устройств.Кто-нибудь испытывал что-то подобное?

Answer 1

Когда вы откроете эту страницу на своем компьютере, URL http://localhost:8080 в fetchFromDatabase подключится к локальному веб-серверу на вашем компьютере и будет работать.Но когда вы открываете ту же страницу на своем мобильном устройстве, тот же код с localhost в URL будет пытаться подключиться к локальному веб-серверу вашего мобильного устройства, который, вероятно, не существует.

Попробуйте заменить localhost с локальным IP-адресом вашего компьютера , и если вы подключены к одной сети с вашим мобильным телефоном, он должен работать.

Кроме того, как предложил @JonasWilms, вы можете заменитьполный URL с "/getAll", поэтому fetch отправит запрос на хост в базовом URL.