Question

我在两个单独的文件夹中有一个后端Node API Express服务器和一个React应用程序（一个用于后端，一个用于React应用程序）。我的后端在localhost:8000上运行，在我的React应用程序上，我使用setupProxy.js通过http-proxy-middleware文件通过该目标实现了代理。当我在localhost:3000上本地运行react应用时，它可以将请求正确发送到我的后端。

但是，当我在自己的React应用上运行yarn build进行生产时，它似乎无法正常工作。在React应用的仓库中，我已经安装了Express以在localhost:9000上提供静态文件。当我尝试调用后端时，它仅返回构建文件夹的index.html。我想知道我做错了什么还是错过了什么。我想要的是：

当用户继续使用localhost:9000时，它将显示index.html文件夹中的build。
用户单击按钮时，应将请求发送到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.');
});

Answer 1

是否已在节点API中添加了cors的依赖项。与不同类型的环境进行通信时需要它

创建不监听后端API的React App生产版本

1 个答案: