React Native 代理与普通反应代理的工作方式不同吗？

Question

我正在尝试从在我的设备端口 5000 上本地运行的 API 获取数据。从开发 React Web 应用程序开始，我习惯于在 package.json 中设置代理，如下所示：

"proxy": "https://localhost:5000"

现在我尝试像这样从 API 中获取一些东西：

fetch("/colours", {
            method: "GET",
            headers: {
                "Content-Type": "application/json;charset=utf-8",
            }
        })...

遗憾的是，如果我现在在浏览器上运行我的应用程序，它仍然会说它会将请求发送到 http://localhost:19006/colours。响应包含用于重新加载按钮的 HTML。

我还检查了我的 API 控制台，没有任何请求到达那里。我已经尝试过删除package-lock.json 和node_modules 并重新安装的常用技巧。

对于 React Native，我处理 API 请求的方法是否根本错误？

Answer 1

是的，网络请求在 React Native 中的工作方式不同，因为它不是基于浏览器的框架。我认为fetch 将转到localhost:19006，因为那是 Metro 正在运行的端口。

我认为，获得所需内容的最简单方法是在代码中定义 URL。更常见的是，它被设置到您的环境中，并通过 react-native-config 之类的方式使用。

这是一个使用内联定义的 URL 进行获取的示例：

const API_URL = 'http://192.168.X.X:5000'

const options = { ... }

fetch(API_URL + '/colors', options)
  .then(console.log);

注意：不要使用localhost，因为它只能在 iOS 模拟器中工作（也可能在浏览器中）。请改用您的本地 IP 地址。这是因为 iOS 模拟器是唯一共享您机器网络配置的“设备”。 Android 模拟器或任何真实设备都不会。