当我使用react-native init (RN版本0.29.1)创建一个全新的项目,并在渲染方法中获取公共facebook演示电影API时,它抛出了一个网络请求失败。有一个非常无用的堆栈跟踪,我不能调试网络请求在chrome控制台。这是我发送的fetch:

fetch('http://facebook.github.io/react-native/movies.json')
      .then((response) => response.json())
      .then((responseJson) => {
        return responseJson.movies;
      })
      .catch((error) => {
        console.error(error);
      });

当前回答

检查您的SSL是否正确配置,将url放在这里。

其他回答

对于fetch API,你应该在.then中处理错误情况。

例如:

fetch(authURl,{ method: 'GET'})
.then((response) => {      
  const statusCode = response.status;
  console.warn('status Code',statusCode);
  if(statusCode==200){
    //success code
  }else{
    //handle other error code
  }      
},(err) => {
  console.warn('error',err)
})
.catch((error) => {
  console.error(error);
  return error;
});

对于Android设备,进入您的项目根文件夹并运行命令:

adb reverse tcp:[your_own_server_port] tcp:[your_own_server_port]

例如:adb reverse tcp:8088 tcp:8088

这将使您的物理设备(即。Android手机)监听本地主机服务器运行在您的开发机器(即您的计算机)地址http://localhost:[your_own_server_port]。

之后,你可以直接在react-native fetch()调用中使用http:localhost:[your_port] /your_api。

React Native Docs给出了这个问题的答案。

苹果已经阻止隐式明文HTTP资源加载。所以我们需要添加以下我们的项目的信息。Plist(或等效)文件。

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

测试您的集成->添加应用程序传输安全例外

为了找到根源问题,我使用XMLHttpRequest而不是获取,并在发送请求后抛出一个异常的消息,告诉实际问题HTTP_1_1_REQUIRED。

显然,react本机(在我的情况下v0.59)只支持http/1.1,然后我在web服务器上禁用了http/2。

如果你的网络服务器是IIS,看看这个问题的答案

希望这能有所帮助。

如果你在REST api中使用docker,我的一个工作案例是将主机名:http://demo.test/api替换为机器ip地址:http://x.x.x.x/api。你可以通过检查你的无线网络的ipv4来获取IP。你的手机也应该有wifi。