通过Expo向本地主机的HTTP请求

问题描述

我正在尝试从Expo（React-Native）应用程序向PC上运行的node.js服务器执行HTTP请求，但是在使它正常工作时遇到了一些麻烦。我正在使用ngrok公开本地主机，并在提取中使用了ngrok服务器，但是在POST请求后，我继续收到网络请求失败。

我正在如下创建服务器：

app.listen(process.env.PORT,() => {
  console.log(`Application is listening on ${process.env.PORT}`);
  (async function () {
    const endpoint = await ngrok.connect(process.env.PORT);
    console.log(
      `Publicly accessible tunnel to localhost:${process.env.PORT} is available on ${endpoint}`
    );
  })();
});

其中process.env.PORT设置为3000。启动服务器后，它成功连接，我能够通过Postman发送HTTP请求，并成功查看了注入到mongoDB数据库中的数据。

现在，对于我的前端获取，我有以下代码：

try {
  let response = await fetch(`https://0b02aa4f40e2.ngrok.io/signup`,{
    method: "POST",headers: {
      Accept: "application/json","Content-Type": "application/json",},body: JSON.stringify({
      email: this.state.email,password: this.state.password,}),})
    .then((response) => response.json())
    .then((state) => this.setState(state));
  console.log(response);
} catch (err) {
  console.log("Fetch didnt work.");
  console.log(err);
}

其中，获取URL是ngrok在服务器启动时提供的URL。我只是做一些基本的帖子配置，并传递一些我通过应用程序输入的电子邮件/密码。但是，提取始终失败，并且最终出现如下相同错误：

Network request failed
- node_modules\whatwg-fetch\dist\fetch.umd.js:487:17 in setTimeout$argument_0
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:135:14 in _callTimer
- node_modules\react-native\Libraries\Core\Timers\JSTimers.js:387:16 in callTimers
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:425:19 in __callFunction
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:112:6 in __guard$argument_0
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:373:10 in __guard
- node_modules\react-native\Libraries\BatchedBridge\MessageQueue.js:111:4 in callFunctionReturnFlushedQueue  
* [native code]:null in callFunctionReturnFlushedQueue

我对这里做错了什么或我错过了什么感到茫然。

我正在使用我的iPhone进行测试。我已经安装了android模拟器，但是还没有尝试过，它会得出相同的结果。

解决方法

我将Metro bundler的连接模式设置为LAN，我不得不将其更改为隧道，现在当我为它提供ngrok URL并能够发送发布请求时，它就可以工作。