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

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

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

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

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

现在假设你有这段代码/server/index.js它直接来自快速示例，但路线以/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);

希望能帮助到你

更新 10/21/2019

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

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