Reactjs 灯滴上的MERN堆栈（DigitalOcean）

我将一个MERN应用程序分为：

1. <代码>客户端文件夹：前端代码（REACT应用程序）
2. <代码>服务器文件夹：API代码（Express、NodeJs）

出于某种原因，前端调用应用程序的

/api

部分，但不返回响应。问题是否在Apache2设置中？或者react应用程序中的某个东西。ExpressJs（后端）和ReactJs（前端）之间的链接通常是如何完成的

路由是通过Apache2反向代理设置的

<IfModule mod_ssl.c>
<VirtualHost *:443>
  ServerName example.com
  ServerAlias www.example.com
  DocumentRoot /var/www/example.com/
  Options -Indexes

  ProxyRequests on
  ProxyPass /api https://example.com:3000/
  ProxyPassReverse /api https://example:3000/
  ProxyPass / https://example.com:7000/
  ProxyPassReverse / https://example:7000/

  Include /etc/letsencrypt/options-ssl-apache.conf
  SSLCertificateFile /etc/letsencrypt/live/example.com/fullchain.pem
  SSLCertificateKeyFile /etc/letsencrypt/live/example.com/privkey.pem
</VirtualHost>
</IfModule>

ServerName example.com
ServerAlias www.example.com
DocumentRoot/var/www/example.com/
选项-索引
代理请求
ProxyPass/apihttps://example.com:3000/
ProxyPassReverse/apihttps://example:3000/
ProxyPass/https://example.com:7000/
ProxyPassReverse/https://example:7000/
Include/etc/letsencrypt/options-ssl-apache.conf
SSLCertificateFile/etc/letsencrypt/live/example.com/fullchain.pem
SSLCertificateKeyFile/etc/letsencrypt/live/example.com/privkey.pem

只是想在我试图实现的目标的图片中澄清一下：

---

我认为问题在于您忘记了为生产准备React应用程序。您一直在开发它，并使用react脚本start或类似的东西。完成开发后，必须运行react脚本构建，以便将代码转换为浏览器可以读取的内容。Web浏览器不会读取诸如导入和请求之类的内容

以下是准备生产的信息（非常简单）

以下是有关如何将其与后端集成的信息：

基本上： 在客户端文件夹中运行

npm build

在server.js中添加

app.use(express.static(__dirname + '/build')

---

现在，客户端从后端服务器请求index.html，并为react应用程序提供服务。附加好处：不再出现CORS错误。您为CORS做的任何工作都可能需要删除。

我从您的图片中了解到您正在尝试做什么，但这不是web的工作方式。前端只是html、css和JavaScript文件，客户端从服务器请求这些文件，服务器发送这些文件。然后浏览器读取文件并显示它们。您的React前端未在服务器上运行。请尝试我的答案。我通过修改Apache2代理将请求从域路由到两个单独的路径到一个本地地址：/api-->localhost:3000/-->localhost:7000，使其工作。REACT应用程序将api调用路由到可通过web访问的后端URL。调用了

npm start script build

，并在expressjs应用程序上启动了名为

npm start

的React应用程序，以便启动服务器。之后一切正常，谢谢您的帮助