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

问题是您尝试通过手机访问localhost。当您在与服务器相同的计算机上运行iOS模拟器时工作正常，但您的手机需要计算机的主机名或IP地址。这些是你可以解决这个问题的几种方法：

在您的计算机（ngrok http 3000）上运行ngrok之类的网络隧道，并在http://<hash>.ngrok.io访问它。由于ngrok会终止TLS，因此您也可以测试HTTPS URL。
找到您计算机的主机名，然后在http://<hostname>.local:3000访问该主机名。这需要您的计算机和路由器支持Bonjour。
找到您计算机的LAN IP地址，并通过http://<ip>:3000

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

1 个答案: