VueJS MEVN stack - axios put 'Error: Request failed with status code 404' although Postman 'put' works fine

Question

我正在学习使用 VueJS 和 MEVN 堆栈构建完整堆栈应用程序的教程。我有

a) 构建 mongo db
b) 用一个 mongoose 模型构建 api 后端 'Student'
c) 在 localhost:4000/api
d) 得到前端运行 VueJS 和 Axios 从中读取数据 api
e) 从我的 VueJS 应用程序中读取、创建和删除工作正常
f) 更新不工作
g) Postman PUT 工作正常，所以我知道后端是很好。

后端路由是

const express = require('express');
const studentRoute = express.Router();

// model
let StudentModel = require('../models/Student');

studentRoute.route('/create-student').post((req, res, next) => {
  console.log('creating one student at /create-student')
  StudentModel.create(req.body, (error, data) => {
  if (error) {
    return next(error)
  } else {
    console.log(`student created ${JSON.stringify(data)}`)
    res.json(data)
  }
})
});

studentRoute.route('/').get((req, res, next) => {
  console.log('GET all students')
    StudentModel.find((error, data) => {
     if (error) {
       return next(error)
     } else {
       res.json(data)
     }
   })
 })

studentRoute.route('/edit-student/:id').get((req, res, next) => {
  console.log('get one student at /edit-student/:id')
   StudentModel.findById(req.params.id, (error, data) => {
    if (error) {
      return next(error)
    } else {
      res.json(data)
    }
  })
})

// Update
studentRoute.route('/update-student/:id').post((req, res, next) => {
  console.log(`attempting to update one student with id ${req.params.id}`)
  console.log(`request body = `)
  console.log(JSON.stringify(req.body))
  console.log(req.body)
  StudentModel.findByIdAndUpdate(req.params.id,
     { $set: req.body },
   (error, data) => {
    if (error) {
      console.log(`an error has taken place`)
      return next(error);
    } else {
      res.json(data)
      console.log('Student successfully updated!')
    }
  })
})

// Delete
studentRoute.route('/delete-student/:id').delete((req, res, next) => {
  console.log('delete one student at /delete-student/:id')
  StudentModel.findByIdAndRemove(req.params.id, (error, data) => {
    if (error) {
      return next(error);
    } else {
      res.status(200).json({
        msg: data
      })
    }
  })
})

module.exports = studentRoute;

前端更新代码为

<template>
    <div class="row justify-content-center">
        <div class="col-md-6">
            <h3 class="text-center">Update Student</h3>
            <form @submit.prevent="handleUpdateForm">
                <div class="form-group">
                    <label>Name</label>
                    <input type="text" class="form-control" v-model="student.name" required>
                </div>

                <div class="form-group">
                    <label>Email</label>
                    <input type="email" class="form-control" v-model="student.email" required>
                </div>

                <div class="form-group">
                    <label>Phone</label>
                    <input type="text" class="form-control" v-model="student.phone" required>
                </div>

                <div class="form-group">
                    <button class="btn btn-danger btn-block">Update</button>
                </div>
            </form>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue } from 'vue-class-component';
import axios from "axios";
export default class EditComponent extends Vue {

  student!: {
    name: '',
    email: '',
    phone: ''
  }

  data() {
    return {
      student: { }
    }
  }

  created() {
    let apiURL = `http://localhost:4000/api/edit-student/${this.$route.params.id}`;
    axios.get(apiURL).then((res) => {
        this.student = res.data;
    })
  }

  handleUpdateForm() {
    let id = this.$route.params.id
    let apiURL = `http://localhost:4000/api/update-student/${this.$route.params.id}`;
    console.log(`attempt to update student at url`)
    console.log(apiURL)
    console.log(`with id`)
    console.log(id)
    console.log(`attempt to update student ${JSON.stringify(this.student)}`)
    axios.put(apiURL, this.student)
    .then(res => {
        console.log(`response is ${res}`)
        this.$router.push('/view')
    })
    .catch(error => {
        console.log('error when updating student')
        console.log(error)
    });
  }
}
</script>

当我使用 Postman 时，我从 api

attempting to update one student with id 6119d671cc9ce131207bd37c
request body = 
{"_id":"6119d671cc9ce131207bd37c","name":"PHIL","email":"philanderson888@hotmail.com","phone":7888849991,"__v":0}{ _id: '6119d671cc9ce131207bd37c',
  name: 'PHIL',
  email: 'philanderson888@hotmail.com',
  phone: 7888849991,
  __v: 0 }
Student successfully updated!

当我使用 VueJS 更新我的学生时，我从这段代码中得到以下错误

// Update
studentRoute.route('/update-student/:id').post((req, res, next) => {
  console.log(`attempting to update one student with id ${req.params.id}`)
  console.log(`request body = `)
  console.log(JSON.stringify(req.body))
  console.log(req.body)
  StudentModel.findByIdAndUpdate(req.params.id,
     { $set: req.body },
   (error, data) => {
    if (error) {
      console.log(`an error has taken place`)
      return next(error);
    } else {
      res.json(data)
      console.log('Student successfully updated!')
    }
  })
})

attempt to update student at url
EditComponent.vue?720f:29 http://localhost:4000/api/update-student/6119d671cc9ce131207bd37c
EditComponent.vue?720f:30 with id
EditComponent.vue?720f:31 6119d671cc9ce131207bd37c
EditComponent.vue?720f:32 attempt to update student {"_id":"6119d671cc9ce131207bd37c","name":"PHIL","email":"phil@phil.com","phone":123,"__v":0}
xhr.js?b50d:177 PUT http://localhost:4000/api/update-student/6119d671cc9ce131207bd37c 404 (Not Found)
dispatchXhrRequest @ xhr.js?b50d:177
xhrAdapter @ xhr.js?b50d:13
dispatchRequest @ dispatchRequest.js?5270:52
Promise.then (async)
request @ Axios.js?0a06:61
Axios.<computed> @ Axios.js?0a06:87
wrap @ bind.js?1d2b:9
handleUpdateForm @ EditComponent.vue?720f:33
eval @ EditComponent.vue?2308:5
eval @ runtime-dom.esm-bundler.js?830f:1400
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:6988
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:6997
invoker @ runtime-dom.esm-bundler.js?830f:347
EditComponent.vue?720f:39 error when updating student
EditComponent.vue?720f:40 Error: Request failed with status code 404
    at createError (createError.js?2d83:16)
    at settle (settle.js?467f:17)
    at XMLHttpRequest.handleLoad (xhr.js?b50d:62)

我知道 mongo 已经更新了他们处理更新的方法并尝试了以下方法

1)

  StudentModel.findByIdAndUpdate(req.params.id,
     { $set: req.body },
   (error, data) => {

  StudentModel.findOneAndUpdate({_id:req.params.id},
     { $set: req.body },
   (error, data) => {

  StudentModel.updateOne({_id:req.params.id},
     { $set: req.body },
   (error, data) => {

在每种情况下，我都会收到上述错误，并且在每种情况下 Postman 都可以正常工作。所以 URL 的形成有问题，我不确定它是什么？？？

非常感谢您的帮助！

谢谢

菲利普

此外，为了以防万一，这是后端 app.js

let express = require('express'),
  cors = require('cors'),
  mongoose = require('mongoose'),
  database = require('./database'),
  bodyParser = require('body-parser');

// Connect mongoDB
mongoose.Promise = global.Promise;
//mongoose.set('useFindAndModify',false);
mongoose.connect(database.db, {
    useNewUrlParser: true,
    useUnifiedTopology: true
}).then(() => {
    console.log("Database connected")
  },
  error => {
    console.log("Database could't be connected to: " + error)
  }
)

const studentAPI = require('../api/routes/student.route')
const app = express();
app.use(bodyParser.json());
app.use(bodyParser.urlencoded({
  extended: false
}));
app.use(cors());

// API
app.use('/api', studentAPI)

// Create port
const port = process.env.PORT || 4000;
const server = app.listen(port, () => {
  console.log('Connected to port ' + port)
})

const logUsage = (logCode) => {
  console.log(`http serving with code ${logCode}`)
}

app.use((req, res, next) => {
  console.log(`logging data in 'next'`)
  next(logUsage(200));
});

app.use(function (err, req, res, next) {
  console.log('in app.use')
  console.error(err.message);
  if (!err.statusCode) err.statusCode = 500;
  res.status(err.statusCode).send(err.message);
});

Answer 1

您可以尝试将更新路径中的post替换为put

VueJS MEVN stack - axios put 'Error: Request failed with status code 404' although Postman 'put' works fine

VueJS MEVN stack - axios put 'Error: Request failed with status code 404' although Postman 'put' works fine

api

vue.js

vue-router

axios

vuejs2