React Native 代理与 vanilla React 代理的工作方式不同吗？

Question

我正在尝试从我设备的端口 5000 上的 API 运行本地获取数据。从使用 React 网络应用程序开始，我习惯于在 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 并重新安装的常用技巧。

我对 API 请求的处理方法对 React Native 来说是根本错误的吗？

Answer 1

是的，网络请求在 React Native 中的工作方式不同，因为它不是基于浏览器的框架。我猜想 fetch 会去 localhost:19006，因为那是地铁运行开的港口。

我认为获得所需内容的最简单方法是在代码中定义 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 模拟器或任何真实设备不会。

React Native 代理与 vanilla React 代理的工作方式不同吗？

Do React Native proxys work differently to vanila react proxys?

typescript

react-native

fetch-api