本地访问的反应应用程序不执行 API 调用 [CRA]

Question

我正在使用 CRA 来设置我的 react 应用程序。

我想问一下，如何让本地访问的 react 应用做 API 调用。 为了解释我的问题，我只能通过描述来解决。

所以目前，我的机器有 192.168.1.2 作为它的 IP。 我的后端服务器在 192.168.1.2:3000 上运行（如果我在浏览器上点击 192.168.1.2:3000/customers 我得到 json 响应） 我的前端在 192.168.1.2:3001 上运行

如果我从我的笔记本电脑浏览器打开http://localhost:3001 或http://192.168.1.2:3001，所有组件都会呈现，它将呈现正在加载的组件，然后在列表将呈现不久之后。 （如果我检查我的后端服务器，我可以看到我的服务器收到 GET 请求）

但是，如果我从手机打开http://192.168.1.2:3001，所有组件都会呈现，但它会卡在正在加载组件。当我检查我的后端服务器时，它根本没有收到任何请求。因此，据我所知，通过在主机外部访问我的 react 应用程序，该应用程序不会执行任何 API 调用。

我该如何解决这个问题？ 我做过的事情：

在 package.json 中添加 "proxy": "http://localhost:3000" 和 "proxy": "192.168.1.2:3000" （两者都不起作用）

将“start”脚本更改为：“HOST=0.0.0.0 react-scripts start”和“react-scripts start --host=0.0.0.0”（两者都不起作用）

Answer 1

我最好的猜测是你从 localhost 获取类似于这样：

fetch("http://localhost:3000/customers")

代理在配置文件中不起作用的原因是您需要从提取中删除“http://localhost:3000”。否则，它仍在为 api ping localhost，而不是使用代理设置。所以它应该是这样的：

fetch("/customers")

当然，如果没有可重现的示例，很难判断这是否正是您遇到的问题。