我的 Axios 调用返回 404 错误,React/Express

IT技术 reactjs express http-status-code-404 axios
2021-05-16 16:06:24

单击按钮后,我正在使用 React 和 Express 尝试将文章发布到 MongoDB。

**server.js**

app.use(express.static("public"));

app.post("/articles/:id", function(request, response){
    console.log(request.body);
});

**home.jsx**

addToFavorites = article => {
    console.log(article);
    this.state.savedArticles.push(article);
    this.setState(this.state.savedArticles);

    axios.post("/articles/" + article.id, {
        title: article.title,
        summary: article.summary,
        writer: article.writer,
        date: article.pub_date,
        url: article.link
    })
    .then(function (response) {
        console.log(response);
    })
    .catch(function (error) {
        console.log(error);
    });
}

控制台打印出文章,因此它不是未定义的,并且调用会捕获以下错误:

Error: Request failed with status code 404
    at createError (createError.js:17)
    at settle (settle.js:19)
    at XMLHttpRequest.handleLoad (xhr.js:78)

阅读其他帖子,人们提到该路径不存在,但我不确定这意味着什么。

任何帮助将不胜感激 :)

更新 :

我的主要问题是我没有在纱线启动之前运行 node server.js。我是 React 的新手,所以我不知道这很重要。

在 package.json 中包含代理也很重要。

2个回答

如果你在 PORT: 8080 上运行你的 express 服务器,然后在 package.json 中添加以下行

"proxy": "http://localhost:8080"

您可以创建生产构建,而不是在开发构建中工作。与生产版本相比,在 UI 上渲染开发构建 js 文件需要花费大量时间,生产版本非常紧凑,经过压缩以获得更好的用户体验并在 UI 上加载。在生产模式下,代码在您客户端的机器上运行,因此这使得最终用户浏览器上的文件渲染速度非常快并提高了性能。

从开发构建更改为生产构建的步骤:

  1. 点击ctrl + c终端退出开发构建。

  2. 在您的项目目录中要创建生产版本,请使用npm run build.

  3. 以上命令编译成功后,用于serve -s build部署静态服务器。

如果您在终端中看到此输出

│ Serving! │ │ │ │ - Local: http://localhost:5000 │ │ - On Your Network: http://172.16.2.1:5000 │ │ │

  1. 您已成功编译生产版本!