在不同的端口上运行前端和后端答案

【问题标题】：running frontend and backend on different ports在不同的端口上运行前端和后端
【发布时间】：2023-04-07 18:10:01
【问题描述】：

您好，我在不同的端口上但在同一主机上运行我的前端 (create-react-app) 和后端服务器 (express.js)。例如：前端在127.0.0.1:3000，后端在127.0.0.1:3003。

在我的 package.json 中：

{...
 "proxy": "http://localhost:3003",
...}

在我没有将应用程序迁移到远程服务器之前一切正常。

当我尝试向服务器发送 http 请求 (axios) 时（可能是由于代理设置错误），我的应用程序开始意外刷新。

所以我在35.125.320:10:3000 上运行了前端应用程序，而在35.125.320:10:3003 上运行了服务器。我的 http 请求被意外取消了。（我检查了网络）。所以我将代理设置更改为

{...
  "proxy": "35.125.320:10:3003",
...}

但无论如何，当我尝试制作 http req 时，我的应用程序仍然令人耳目一新。在服务器上。我认为问题是我无法访问我的快速后端服务器。所以代理转发我的请求很糟糕。

更新

场景：（我做了两个帖子请求）

1) 第一个请求仍然通过（应用未刷新）

2) 通过了相同的请求（但有时会刷新应用）

3) 第二个仍然被浏览器取消。

问题

当我的前端运行在不同端口但在同一服务器和域上时，我的前端如何通过代理与后端服务器通信？？

感谢您的回答。

【问题讨论】：

构造请求时是否使用了相对url？
是的，因为我认为它是由代理处理的
那么，你为什么要使用两个独立的服务器呢？您可以使用 Express 来提供您要构建的文件。 CRA 将其服务器用于开发目的。 “公众”是什么意思？你不是说生产吗？
@devserkan .. 我运行 npm build 然后将此构建作为 express.js 中的静态文件提供。这行得通，但我想知道我尝试使用的这个解决方案是否正确或者有标准的方法来做到这一点。我从来没有在节点服务器上部署前端应用程序。所以我在寻找合适的方法:)。
我也是一名学习者，使用的方式与您描述的相同。我不确定这是标准还是最佳方式，但由于我们不需要开发服务器进行生产，因此使用 Express 静态地为我们的前端提供服务对我来说似乎很合乎逻辑。

【解决方案1】：

要使您的应用公开可用，您需要进行生产构建。您在评论中提到您“运行 npm build，然后将此构建作为 express.js 中的静态文件提供”。这是使您的 React 应用程序公开可用的好方法。正如它在 create-react-app 文档中所说：

npm start 或 yarn start

在开发模式下运行应用程序。

运行yarn start 或npm start 时，您还会收到一条通知，上面写着“请注意，开发版本未优化”。最好的选择是运行 yarn build 或 npm build 并找到一种方法来提供这些静态文件，就像你正在做的那样。

【讨论】：

【解决方案2】：

解决方案：

问题是我在生产中使用了只适合开发的代理。

我在我的 express.js 服务器中添加了这一行：

app.use(express.static(`${process.cwd()}/build`));
app.use(express.static(`${process.cwd()}/public`));

我从我的构建文件夹中构建并提供 js、css 文件。而且我还需要从我的公共文件夹中提供静态文件（图像、文件夹等）。

这个问题也可能导致浏览器在生产环境中取消 http 请求。意味着，请求无法到达服务器。

【讨论】：