React Native fetch() 网络请求失败

IT技术 javascript react-native fetch-api
2021-01-25 10:00:32

当我使用react-native init（RN 版本 0.29.1）创建一个全新的项目并将渲染方法中的提取放入公共 facebook 演示电影 API 时，它会抛出一个Network Request Failed. 有一个非常无用的堆栈跟踪，我无法在 Chrome 控制台中调试网络请求。这是我发送的提取：

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

这里的问题是 iOS 默认不允许 HTTP 请求，只允许 HTTPS。如果要启用 HTTP 请求，请将其添加到您的info.plist：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>
确切地。谁有安卓的答案？
2021-03-15 10:00:32
这个答案对我有用。对于 React Native 的新手，这个文件（info.plist）也可以通过 xcode 编辑：stackoverflow.com/a/38219454/1299792
2021-03-16 10:00:32
我已经在 AndroidManifest.xml 中授予了 INTERNET 权限，但是我遇到了这个问题。知道如何修复它吗？如果我有的话，我会撕掉我所有的头发..grrr
2021-03-19 10:00:32
当我把它放在 ios/build/info.plist 上并运行时： react-native run-ios ios/build/info.plist 被覆盖并退出我的更改我该怎么办？
2021-03-20 10:00:32
安卓呢？我在android中也面临同样的问题。
2021-04-04 10:00:32

不建议允许所有域都使用 http。仅对必要的域进行例外处理。

来源：在 iOS 9 和 OSX 10.11 中配置应用传输安全例外

将以下内容添加到您应用的 info.plist 文件中：

<key>NSAppTransportSecurity</key>
<dict>
  <key>NSExceptionDomains</key>
  <dict>
    <key>yourserver.com</key>
    <dict>
      <!--Include to allow subdomains-->
      <key>NSIncludesSubdomains</key>
      <true/>
      <!--Include to allow HTTP requests-->
      <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
      <true/>
      <!--Include to specify minimum TLS version-->
      <key>NSTemporaryExceptionMinimumTLSVersion</key>
      <string>TLSv1.1</string>
    </dict>
  </dict>
</dict>
我的 React Native 应用程序的多个目录中似乎有多个 info.plist 文件。知道哪个文件夹包含要更改的正确文件吗？
2021-03-22 10:00:32
安卓呢？
2021-03-23 10:00:32
如果我在这里使用我的本地主机：<key>yourserver.com</key>，当我准备好发布时，我需要更改它，对吗？
2021-03-31 10:00:32
@Marklar [your_project_folder_name]/ios/[your_project_folder_name]/Info.plist
2021-04-07 10:00:32

我用localhost的地址，这显然是错误的。将其替换为服务器的 IP 地址（在模拟器所在的网络中）后，它运行良好。

编辑

在 Android Emulator 中，开发机的地址是10.0.2.2. 更多解释在这里

对于 Genymotion，地址是10.0.3.2。更多信息在这里

不要忘记“http：//”，否则它将无法工作......想知道为什么它可以在邮递员上工作而不是在 fetch 上工作
2021-03-13 10:00:32
是的，这有效。从 localhost 更改为开发计算机的实际 IP 地址。
2021-03-18 10:00:32
谢谢你。可能是我见过的唯一适用于 android 的响应。使用了我的网络 IP 地址，它可以工作。例如http://<Network IP emulator connects to>:<port where API is served>/api/tasks
2021-03-29 10:00:32
@Mahmoodvcs 您的回答对我很有帮助，非常感谢，我正在使用 android 模拟器。
2021-04-11 10:00:32

由于“http”，我在 Android 9 上遇到了同样的问题，只需在 AndroidManifest.xml 中添加android:usesCleartextTraffic="true" 即可解决问题

<uses-permission android:name="android.permission.INTERNET" />
<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE"/>
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE"/>
<application
  android:usesCleartextTraffic="true"
 .......>
 .......
</application>

谢谢，这对我也有用。发生这种情况是因为 Android 在 API 28 上默认不再支持 HTTP。
2021-03-27 10:00:32

对我们来说，这是因为我们正在上传一个文件，而 RN filePicker 没有提供正确的 mime 类型。它只是给了我们“图像”作为类型。我们需要将其更改为 'image/jpg' 以使提取工作。

form.append(uploadFileName, {
  uri : localImage.full,
  type: 'image/jpeg',
  name: uploadFileName
 })
@JohhanSantana 您可能可以查看原始图像数据并从一开始就获取它，但是 react native 选择器刚刚为我返回了“图像”。
2021-03-22 10:00:32
其它你可能感兴趣的问题
上一篇递归遍历对象以构建属性列表 下一篇如何正确迭代 getElementsByClassName