【发布时间】：2020-02-18 01:17:33
【问题描述】：
我在两个单独的文件夹中有一个后端 Node API Express 服务器和一个 React 应用程序（一个用于后端，一个用于 React 应用程序）。我的后端在 localhost:8000 上运行，在我的 React 应用程序上，我通过使用 http-proxy-middleware 的 setupProxy.js 文件有一个到此目标的代理。当我在 localhost:3000 上本地运行 react 应用程序时，它可以正确地向我的后端发送请求。
但是，当我在我的 React 应用程序上运行 yarn build 进行生产时，它似乎不起作用。在 React 应用程序的存储库中，我安装了 Express 以在 localhost:9000 上提供静态文件。当我尝试调用后端时，它只返回构建文件夹的index.html。我想知道我是否做错了什么或者我错过了什么。我想要的是：
- 当用户继续
localhost:9000时，它会显示build文件夹的index.html。 - 当用户点击按钮时，它应该向
localhost:8000发送请求，而不是发回index.html。
这里有一些文件以备不时之需：
src/setupProxy.js（在 React 应用上）
const proxy = require('http-proxy-middleware');
module.exports = function(app) {
app.use(proxy('/auth/google', { target: 'http://localhost:8000/' }));
app.use(proxy('/api/**', { target: 'http://localhost:8000/' }));
};
server.js（也在 React 应用上，用于构建文件夹）
const express = require('express');
const path = require('path');
const app = express();
app.use(express.static(path.join(__dirname, 'build')));
app.get('/*', (req, res) => {
res.sendFile(path.join(__dirname, 'build', 'index.html'));
});
app.listen(9000, () => {
console.log('Listening on port 9000.');
});
【问题讨论】：
-
当你说“不听”时，你的意思是当你为生产构建时它仍然不会代理请求？在这种情况下……为什么会这样？代理是开发服务器设置的一部分，不是
build/输出。如果后端也在生产中为静态文件提供服务，那么您就不需要 代理 - 这就是在 dev 中代理它的重点。如果那不是你在做什么，即你有一个单独的前端和后端（听起来像）在开发中使用该代理实际上并不能反映生产架构，所以你不应该使用它。 -
@jonrsharpe，是的，我有一个单独的前端和后端。我想我只是想弄清楚为我的前端应用程序提供服务并让它仍然成功地向我的后端调用请求的最佳方式。我是否必须将
build文件夹复制到我的后端存储库，或者是否有其他解决方案（类似于 NGINX）？ -
在生产环境中为前端应用提供服务的最佳方式是确保它从后端获取所有内容。这可以保证您避免两个常见的陷阱：遇到 CORS 问题和在生产环境中运行 webpack-dev-server。
标签： javascript node.js reactjs api express