为什么 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

当您在计算机上打开此页面时，其中的http://localhost:8080urlfetchFromDatabase将连接到您计算机上的本地网络服务器，并且可以正常工作。但是当您在移动设备上打开同一页面时，localhosturl 中的相同代码将尝试连接到您的移动设备的本地 Web 服务器，该服务器可能不存在。

尝试替换localhost为您电脑的本地IP地址，如果您与手机连接到同一网络，应该可以。

此外，正如@JonasWilms 建议的那样，您可以将完整的 URL 替换为"/getAll"，因此fetch会将请求发送到基本 URL 中的主机。