React Native无法运行成功的获取以表达API

Question

给出以下设置：

server.js

const express = require('express')
const path = require('path')
const app = express()
const cors = require('cors')
const port = process.env.PORT || 8080

app.use(cors())

app.get('/api', (req, res) => {
  res.send({code: 200, message: 'I have arrived!'})
})

app.listen(port, () => console.log(`I can hear your thoughts on ${port}`))

以及带有呼叫的演示组件：

App.js

componentDidMount() {
  fetch(`/api`, {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      'Accept': 'application/json'
    }
  }).then(res => {
    console.log(res)
    return res.json()
  }).then(response => {
    console.log(response)
    this.data = response
  }).catch(error => {
    this.error = error.message || error.error
  })
}

package.json：

"scripts": {
  "start": "npm-run-all --parallel start:client start:server",
  "start:client": "node node_modules/react-native/local-cli/cli.js start",
  "start:server": "node server.js",
  "test": "jest"
},

我正在通过yarn start运行该应用程序，并且看到日志：“我可以听到您的想法” ... 但是，获取呼叫从未进行。如果我在fetch调用中提供了另一个完全限定的url，它将返回预期的数据，但是我无法从组件内部访问express api。

• 如果将http://localhost:8080/api放在浏览器中，则会得到响应。
• 如果我将http://localhost:8080/api放在fetch调用中，则不会调用它（或者至少看起来没有）。

如何在本地运行时正确配置它以调用Express api？

一如既往地感谢所有方向，所以在此先感谢您！

Answer 1

我认为这是两个问题。

---

首先，您正在同一终端窗口中运行服务器和捆绑器。我相信这使他们感到困惑。

在单独的窗口中运行它们。是的，这意味着您必须运行一个额外的命令，但这意味着您将能够清楚地看到每个日志。

此外，您可能必须重新启动捆绑程序，尤其是在添加新软件包时，这意味着重新启动服务器。

类似地，当您更新服务器时，您将不得不重新启动服务器，这也会导致您重新启动捆绑器。在同一窗口中运行它们似乎不是一个好主意。

---

第二，您将localhost用于api。这可以在您的计算机上很好地工作，因为api正在计算机的localhost上运行，因此可以找到它。但是，当您在设备上运行它并使用localhost时，它将在设备的本地主机上查找api，并且无法在其中找到它，因此不会返回结果。

---

您的解决方案很明确。首先，在不同的终端窗口中运行捆绑程序和服务器。其次，使用计算机的IP地址，以便模拟器可以轻松地找到api所在的位置。

我复制了您的代码，仅对react-native代码进行了两次更改。

1. 添加了警报，以显示来自response请求的error和fetch
2. 使用了我计算机的本地IP地址，而不是localhost

以下是我使用您的代码和我上面详细介绍的更改在Android和iOS上运行它的一些图片。

Android

iOS