如何修复/解决静态站点的 React Express 404 错误？答案

【问题标题】：How to fix/troubleshoot React Express 404 Error with static site?如何修复/解决静态站点的 React Express 404 错误？
【发布时间】：2021-08-17 09:26:12
【问题描述】：

我有一个调用这个提交函数 onSubmit 的输入：

  const onSubmit = (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault();
    setfruit(item);
    console.log("sent")
    fetch('/api/tasks/add', {
      method: 'post',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({ Name: item.Name,Quantity: item.Quantity, edit: item.edit }),
    }).then(() => {
      setItem(itemd)
      getTasks();
    });
  };

还有我的路线：

router.post('/add', (req, res) => {
    const { Name, Price, edit } = req.body;
    const newTask = new Task({ Name, Price, edit });

    newTask.save()
        .then(task => res.json(task))
        .catch(err => res.json(500, err));
});

这是我的 index.js：

const express = require('express');
const path = require('path');
const bodyParser = require('body-parser');

const app = express();

const routeTasks = require('./src/routes/tasks');

app.use(express.static(path.join(__dirname, './client/build')));
app.use(bodyParser.json());

app.use('/api/tasks', routeTasks, (req, res) => res.sendStatus(401));

app.get('*', (req, res) => {
    res.sendFile(path.join(__dirname + './client/build/index.html'));
});

const port = 5000;
app.listen(port);

console.log(`listening on ${port}`);

每次调用 onSubmit 函数时，都会收到 404 错误。我不知道为什么。

我使用这个 repo 作为创建我的 express 服务器的指南，但由于某种原因，当我切换底层 React 应用程序时它停止工作。 https://github.com/jmsv/simple-mern

【问题讨论】：

您是否在您的 React 应用中配置了代理以将 /api 请求转发到您的 Express 应用？
尝试检查您发出请求的 localhost 端口号是否与您的快速应用程序正在侦听的端口号匹配。您似乎正在向 3000 发出请求，但 express 正在收听 5000。
@rexessilfie 链接到的示例项目 OP 使用 proxy。 OP 是否保留该配置是真正的问题
@Phil 让我检查一下。
@Phil 我明白了，我只是在注释中给出了小写的数量，而不是在代码中。我重新启动了快递服务器，现在它可以工作了！

标签： node.js reactjs mongodb express fetch

【解决方案1】：

根据 Phil 的评论，我的问题是我要使用的示例 Repo 使用了我没有在我自己的应用程序中配置的 React 代理。一旦我将它添加到 package.json 文件中，它就起作用了。

【讨论】：