node.js - MERN Stack - Express 和 React 在同一端口上？

Question

我正在开发一个使用 MERN(MongoDB、Express、React、Node)堆栈的项目，在将数据从 React 组件内的表单发布到 Node.js 中定义的 API 端点时遇到问题。当我提交表单时，浏览器仅显示“无法发布”错误。我非常有信心，如果我在 React 中为表单提交创建一个事件处理程序，并使用 Axios 等库处理 POST，我就可以解决这个问题。

但最终我相信这个问题是因为 Node 后端运行在与 React 前端不同的端口上。有没有一种方法可以配置我的堆栈，以便我可以使用标准形式的 POST，并可能让 FE 和 BE 在同一端口上运行？

Answer 1

我发现您正在运行未弹出的 CRA。这意味着当您从 create-react-app 文件夹运行 npm run start 时，您应该在默认端口 3000 上运行 React。

首先，我建议将服务器和客户端代码保存到具有单独 package.json 文件的单独文件夹中

现在假设您在 /server/index.js 中有此代码，它直接来自 Express 示例，但路由以 /api 开头，并且也将在端口5000。这非常重要，您很快就会明白原因。

const express = require('express');
const app = express();

app.get('/api/hello', (req, res) => res.send('Hello World!'))

app.listen(5000, () => console.log('Example app listening on port 5000!'))

现在回到您的 /client 文件夹(我假设您的 CRA 位于该文件夹)，打开 package.json 并添加以下行:

"proxy": {
  "/api/*": {
    "target": "http://localhost:5000"
  }
},

现在尝试使用 axios 来调用服务器，例如:

const helloFromApi = 
  axios
    .get('/api/hello')
    .then(res => res.data);

希望对你有帮助

更新 2019 年 10 月 21 日

package.json 中的 proxy 字段必须是字符串

"proxy": "http://localhost:5000"