在不同端口上运行前端和后端

Question

你好，我正在将我的前端（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请求时，我的应用程序仍然在刷新。我认为问题在于我无法访问我的express后端服务器。因此，代理正在错误地转发我的请求。

更新

场景：（我正在执行两个post请求）

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

2）相同的请求已通过（但有时应用程序会被刷新）

3）第二个请求仍然被浏览器取消。

问题

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

感谢您的答复。

- Morten

---

在构建请求时，您是否使用相对URL？ - Yoav

@dostu 是的，我可以。我需要将它公开 :)。 - Morten

那么，你为什么要使用两个独立的服务器呢？你可以使用Express来提供你将要构建的文件。CRA使用它的服务器进行开发目的。你所说的“public”是什么意思？难道你的意思不是生产环境吗？ - devserkan

@devserkan .. 我运行npm build，然后将其作为静态文件在express.js中提供服务。这个方法可以工作，但我想知道我正在尝试使用的解决方案是否正确，或者是否有一种标准的方法来实现它。我从未在节点服务器上部署前端应用程序。因此，我正在寻找一个合适的方式 :)。 - Morten

我也是一个学习者，正在使用你描述的相同方式。我不确定它是否是标准或最佳方式，但由于我们不需要开发服务器用于生产环境，使用Express静态地提供我们的前端似乎对我来说是相当合理的。 - devserkan

Answer 1

解决方案：

问题在于我在生产环境中使用了仅适用于开发的代理。

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

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

我制作了一个构建并从我的构建文件夹中提供js、css文件的服务。同时，我还需要从我的公共文件夹中提供静态文件（图片、文件夹等...）。

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

- Morten

Answer 2

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

npm start或 yarn start

以开发模式运行应用程序。

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

- Danny Harding