2

嗨，我在不同的端口上但在同一主机上运行我的前端（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）第二个仍然被浏览器取消。

问题

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

感谢你的回答。

4

2 回答 2

0

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

npm start或者yarn start

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

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

于 2018-03-28T20:08:46.347 回答
0

解决方案：

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

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

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

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

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

于 2018-04-19T09:00:37.033 回答