React Native 网络请求在 iPhone 上失败但在 iOS 模拟器中成功

Question

正如许多人在回答类似问题时所建议的那样，我编辑了我的 info.plist 添加：

<key>NSAllowsArbitraryLoads</key>
<true/>

我还在 Xcode 中确保允许任意加载：

在 iOS 模拟器中一切正常，但是当我尝试在我的 iPhone 上发出网络请求时，我在远程调试器中收到此错误：

TypeError: Network request failed
    at XMLHttpRequest.xhr.onerror (fetch.js:441)
    at XMLHttpRequest.dispatchEvent (event-target.js:172)
    at XMLHttpRequest.setReadyState (XMLHttpRequest.js:542)
    at XMLHttpRequest.__didCompleteResponse (XMLHttpRequest.js:378)
    at XMLHttpRequest.js:482
    at RCTDeviceEventEmitter.emit (EventEmitter.js:181)
    at MessageQueue.__callFunction (MessageQueue.js:236)
    at MessageQueue.js:108
    at guard (MessageQueue.js:46)
    at MessageQueue.callFunctionReturnFlushedQueue (MessageQueue.js:107)

我已经重新启动 Xcode 次了，现在我已经数不清了。我从来没有在任何其他应用程序上遇到过这个问题。这里是请求中的代码，错误来自倒数第二个catch：

loginFinished (error, result) {
  if (error) {
    console.log(error)
    alert("Login failed with error: " + error);
  } else if (result.isCancelled) {
    alert("Login was cancelled");
  } else {
    AccessToken.getCurrentAccessToken()
      .then(response => {
        console.log('1',response)
        fetch(`http://localhost:3000/auth`, {
          method: 'POST',
          headers: {
            'Accept': 'application/json',
            'Content-Type': 'application/json'
          },
          body: JSON.stringify({
            fbAccessToken: response.accessToken
          })
        })
        .then(response => response.json())
        .then(data => {
          console.log('data: ', data)
          this.props.setUser(data)
        })
        //Network error comes from this catch
        .catch(err => console.log(err))
      })
      .catch(err => console.log(err))
  }
}

Answer 1

问题是您正试图从您的 phone 访问 localhost。当您运行 iOS 模拟器与您的服务器在同一台计算机上工作正常时，但您的 phone 需要您计算机的主机名或 IP 地址。您可以通过以下几种方式解决此问题：

ngrok http 3000

运行类似 ngrok 的网络隧道，并在 http://<hash>.ngrok.io 访问它。由于 ngrok 执行 TLS 终止，您也可以测试 HTTPS URL。
找到您计算机的主机名并访问 http://<hostname>.local:3000。这需要您的计算机和路由器支持 Bonjour。
找到您计算机的局域网 IP 地址并访问 http://<ip>:3000

React Native 网络请求在 iPhone 上失败但在 iOS 模拟器中成功

React Native network request fails on iPhone but succeeds in iOS simulator

fetch

ios

react-native