Node.js React Native无法成功运行提取到express API

给定以下设置：

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

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

以及调用的表示组件：

App.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}`))

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"
},

我正在通过

纱线开始

运行应用程序，我看到日志：“我能听到你的想法”但是，从来不会进行提取调用。如果我在fetch调用中提供另一个完全限定的url，它将按预期返回数据，但是我无法从组件中访问expressAPI

• 如果我放置

  http://localhost:8080/api

  我在浏览器中得到响应
• 如果我放置

  http://localhost:8080/api

  在fetch调用中，它从未被调用（或者至少看起来没有）

在本地运行时，我如何正确配置此函数以调用express api？

---

如往常一样，任何和所有方向的感谢，所以提前感谢

我认为这个问题有两个方面

---

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

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

此外，您可能还必须重新启动bundler，尤其是在添加新包时，这意味着重新启动服务器

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

---

其次，您正在为api使用

localhost

。这在您的计算机上运行得很好，因为api正在您计算机的

localhost

上运行，所以它可以找到它。但是，当您在设备上运行它并使用

localhost

时，它会在设备的localhost上查找api，但在那里找不到，因此不会返回结果

---

你的解决办法很清楚。首先，在不同的终端窗口中运行bundler和服务器。其次，使用计算机的ip地址，以便仿真器/模拟器可以轻松找到api所在的位置

我复制了您的代码，只对

react native

代码进行了两次更改

添加警报以显示

获取请求中的
响应
和
错误

使用了我计算机的本地ip地址，而不是

localhost

下面是我在Android和iOS上运行它的一些图片，使用了您的代码和我上面详述的更改

安卓

网间网操作系统

---

您的问题是由于在api调用中使用术语

localhost

造成的。您需要使用计算机的ip地址。类似于

192.168.#########/api/

或您的ip地址之类的内容。不幸的是，在获取URL中替换为ip会产生相同的结果。您的组件肯定正在装载吗？如果是，您是否从提取请求中获得任何错误？您是否已尝试在服务器上添加其他日志记录，以查看请求是否到达服务器？您是否尝试过不同的api端点，如

https://jsonplaceholder.typicode.com/todos/1“

？它不在上面的代码中，但我正在记录componentDidMount，所以是的，它正在安装。目前根本没有网络日志。如上所述：

…如果我在fetch调用中提供另一个完全限定的url，它将按预期返回数据

-因此，是的，我也尝试过这样做<代码>{userId:1，id:1，title:“deletus aut autem”，completed:false}通过提供的url记录。调试服务器可能会出现问题，并试图运行express服务器吗？

react native

或

expo

？感谢您的详细回答。它将帮助其他可能遇到同样问题的人。IP和单独的选项卡绝对是解决方案（至少在开发模式下）。另外，我现在使用一个名为

ttab

的包，它将通过npm脚本打开一个新的终端窗口：

“tab:server”：“ttab-t'api server'npm run start:server”