React Native 获取 https localhost 网络请求失败

Posted 2023-02-16

【中文标题】React Native 获取 https localhost 网络请求失败

【英文标题】：React Native fetch https localhost network request failed

【发布时间】：2021-12-06 13:45:54

【问题描述】：

我正在尝试从 ASP.NET 服务器获取本地托管的 API：

  try 
    const response = await fetch(`https://localhost:2318/api/Restaurant`)
    const data = await response.json()
    console.log(data)
   catch (error) 
    console.error(error)
  

但是，它会引发错误：

Network request failed
at node_modules/whatwg-fetch/dist/fetch.umd.js:535:17 in setTimeout$argument_0

我的端点都不起作用。从公共 API 获取有效。同样奇怪的是，在模拟器内的 Safari 中打开获取 url https://localhost:2318/api/Restaurant 可以正常工作并按预期返回数据。

我正在使用 Expo v42.0.1、RN v0.66。

有什么想法吗？

【问题讨论】：

你确定是https吗？

@KenyiLarcher 我很确定是的，因为使用 https 输入 url 在模拟器的 safari 中有效，而使用 http 输入 url 则表示“Safari 无法打开页面，因为网络连接丢失。”

【参考方案1】：

您正在向将拥有自签名证书的 localhost 服务器发出请求。因此，ios 或 android 都不允许直接从该 API 获取。

最简单的解决方案是使用react-native-fetch-blob。 （只需将 trusty 作为 true 传递）。

RNFetchBlob.config(
  trusty : true
)
.then('GET', 'https://example.com')
.then((resp) => 
  // ...
)

如果您仍想使用 fetch 并尝试以下解决方案。

如果您使用 iOS 设备进行测试： 你可以做两件事：

您可以使用以下实现进行 HTTP 调用（在您的 url 中将 https 更改为 http）。

如果您想启用 HTTP 请求，请将其添加到您的 info.plist：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <true/>
</dict>

您可以使用以下实现来使用 HTTPS（自签名）调用。

React-native fetch() from https server with self-signed certificate

如果您使用 Android 设备进行测试：

尝试以下解决方案： https://***.com/a/55246927/8893384

据我了解，

react-native-fetch-blob 不适用于 Expo。我最终将我们本地服务器的 URL 更改为仅 HTTP，从中获取在 React Native 中工作得非常好。我认为将来我们将不得不考虑签署普通证书。