如何让 create-react-app 使用 IP 连接到我的 api 服务器？

Posted 2023-03-08

【中文标题】如何让 create-react-app 使用 IP 连接到我的 api 服务器？

【英文标题】：How can I get create-react-app to use an IP to connect to my api server?

【发布时间】：2018-08-02 23:22:00

【问题描述】：

我正在使用 Facebook 的 create-react-app。当我启动 web 客户端时，我在控制台中看到：

You can now view web-client in the browser.

  Local:            http://localhost:3000/
  On Your Network:  http://192.168.1.107:3000/

问题是我的 web-client 使用 localhost 连接到 api-server，这意味着我不能使用不同设备上的 IP 地址来调试问题。

env-variables.js：

export const ENV = process.env.NODE_ENV || 'development';

const ALL_ENV_VARS = 
  development: 
    GRAPHQL_ENDPOINT_URI: 'http://localhost:4000/graphql',
  ,
....

我尝试使用以下内容更新上述内容：

GRAPHQL_ENDPOINT_URI: `http://$process.env.ip:4000/graphql`,

这不起作用，process.env.ip 返回未定义。如何获取上述 GRAPHQL_ENDPOINT_URI 以使用 create-react-app 获取的 IP 地址？

【参考方案1】：

尝试将以下内容添加到您的客户端 package.json：

"proxy": "http://localhost:4000/",

然后你就可以离开了

http://localhost:4000

关闭从客户端指向 API 服务器的任何 URL。您只需将这些地址称为

/graphql/<any additional URL data>

我已经对 Node/Express 后端和 React 前端执行了相同的操作 - 我使用以下解决了 server.js 中的 /api 部分：

//Use our router configuration when we call /api
app.use('/api', router);

只需将 /api 替换为 /graphql 即可。

查看这篇文章以获得进一步的解释。希望这会有所帮助！

https://medium.freecodecamp.org/how-to-make-create-react-app-work-with-a-node-backend-api-7c5c48acb1b0