(404) 尝试使用路由端点存储数据时出错答案

【问题标题】：(404)Error when trying to store data with route endpoint(404) 尝试使用路由端点存储数据时出错
【发布时间】：2023-03-23 05:20:01
【问题描述】：

我正在尝试在用户注册时存储用户数据。我在反应中使用了一个简单的形式。后端的 Node/express。

我收到 404 未找到错误。

警告--

我在客户端的 package.json 中有一个代理设置为我的服务器端口：

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

我的客户端在 3000 端口上运行（我正在使用 create-react-app）

表格逻辑如下：

    createUser(e) {
        e.preventDefault();
        const newUser = {
            name: this.state.name,
            password: this.state.password,
            zip: this.state.zip
        }

        axios.post('./api/users/register', newUser)
            .then(res => console.log(res.data))
            .catch(err => console.log(err))
    }

这是来自后端的路由逻辑：

router.post('/register', (req, res) => {
    // const { errors, isValid } = validateRegisterInput(req.body);

    // // Check Validation
    // if (!isValid) {
    //   return res.status(400).json(errors);
    // }

    // User.findOne({ name: req.body.name }).then(user => {
    //   if (user) {
    //     errors.name = 'Name already exists';
    //     return res.status(400).json(errors);
    //   } else {

        const newUser = new User({
          name: req.body.name,
          password: req.body.password,
          zip: req.body.zip
        });

        newUser
          .save()
          .then(user => res.json(newUser))
          .catch(err => console.log(err));

        // bcrypt.genSalt(10, (err, salt) => {
        //   bcrypt.hash(newUser.password, salt, (err, hash) => {
        //     if (err) throw err;
        //     newUser.password = hash;
        //     newUser
        //       .save()
        //       .then(user => res.json(newUser))
        //       .catch(err => console.log(err));
        //   });
        // });
      //}
  //   });
  });

这是我从浏览器收到的错误：

xhr.js:178 POST http://localhost:3000/api/users/register 404 (Not Found)

Error: Request failed with status code 404
at createError (createError.js:16)
at settle (settle.js:18)
at XMLHttpRequest.handleLoad (xhr.js:77)

我明白，即使我看到了错误

http://localhost:3000/api/users/register

我的代理应该仍然有效。根据这里的讨论： https://github.com/facebook/create-react-app/issues/1219

--- 来自本次讨论的评论：

“看起来您确实收到 400 ERROR。这是否意味着请求被代理（但服务器由于某种原因失败）？

请求在浏览器中似乎是 3000 端口，因为这是代理功能的重点。它是必需的，以便浏览器允许我们在不启用该服务器上的 CORS 的情况下发出请求。但是实际请求会被代理，因此当您将其视为对 3000 的请求时，CRA 会将其通过管道传输到 8080 端口，而应用程序本身无法检测到。”

【问题讨论】：

您的问题不清楚：您是向端口 5000 还是端口 8080 发送代理请求？
在问题的顶部，我有我正在使用的代码行，端口 5000。底部引用来自 github 讨论。我会修改它以使其更清晰。
啊，我不明白。可以访问localhost:5000/api/users/register吗？
是的，我可以通过这条路线使用邮递员成功存储用户
您是否尝试过删除 XHR 请求中的前导点，并改用绝对路径？喜欢axios.post('/api/users/register', newUser)？

标签： node.js reactjs express axios

【解决方案1】：

上个月我也遇到了同样的错误。

但是我通过调用我的 server.js(app.js) 来解决这个问题，我想如果你这样做，你会得到它

请看下面的代码

`axios.post('/sqladd',{
            year : this.state.year,
            multi : this.state.multiyear
           }).then(function(response){
            // window.alert("Data Inserted to SQL DB !");
            // window.location.href = "http://localhost:3000/";
           }).catch(function(error){
            //toastr.clear();
            //toastr.error(error);
           });`

这是将数据发送到它在反应文件（客户端文件夹）中的数据库

var control =require("./controllers/framcontroller.js");

app.post('/sqladd',control.farm_add);

它在服务器上意味着在 express 文件夹中（app.js 文件）

由于我使用的是控制器，所以我将路径作为控件名称

module.exports.farm_add = (req,res)=>{ 
 let year = req.body.year;
 let multi = req.body.multi;
 let post = {name:year, address:multi};
 let sql = 'INSERT INTO customers SET ?';
 let query = con.query(sql,post,(err,result)=>{
  if(err) throw err;
  console.log(result);
  res.send('New data added..');
});

这是我的数据库操作。

如果还有其他问题，请告诉我

谢谢

【讨论】：