在使用 Axios 的 Node.js 代碼上出現 Request failed 404 錯誤

Question

我正在嘗試使用 Node.js + express + Axios 鏈接 2 個服務器文件以使用 URL 執行某些操作

鏈接結構是

FE Client [UI (VUE) -> PostService.js] -> BE Server [index.js -> posts_users.js -> DB]

我現在的情況是...

1. 注冊新用戶效果很好(FE UI (vue) -> PostService.js(insert_Users_Post) -> BE posts_users.js(router.post('/'))

2. 其他兩個（修改和刪除）出現以下錯誤

   main.js?attr=gU7jfEErMGN47FOrFiB547YfT_VvvSwaYNqc5Th-l4B1v8b4BwucNhxWmVsYhNG6uoWufyN_zukG_sameBaZuQ:1078 PATCH http://localhost:8080/User_Management/api/posts_users/6049b4cbc3c1a94668af9e64 404 (Not Found)

   vue.esm.js?a026:1897 錯誤：在 XMLHttpRequest.handleLoad (xhr.js?b50d: 62)

奇怪的是..

1. 在 PostService.js 代碼上，我檢查了它是否接收到 '_id' 值 [例如）_id = 6049a5238651e35bc0cf449c]
2. 和其他 UI 選項也引用了類似的代碼結構，但運行良好....

有任何提示....修復錯誤..？

這是我的 PostService.js 代碼

import axios from "axios";    
const url_users = "api/posts_users/";

class PostService {

  //Create users post 
  static insert_Users_Post(createdAt, userID, firstName, lastName, max_temp, phoneNum, emailAddr, department, deviceName, role, status) {
    return axios.post(url_users, {
      createdAt, userID, firstName, lastName, max_temp, phoneNum, emailAddr, department, deviceName, role, status
    });
  }

  //update users post
  static update_Users_Post(_id, createdAt, userID, firstName, lastName, max_temp, phoneNum, emailAddr, department, deviceName, role, status) {
    return axios.patch(url_users+ `${_id}`, {
      createdAt, userID, firstName, lastName, max_temp, phoneNum, emailAddr, department, deviceName, role, status
    });
  }

  //delete users post
  static delete_Users_Post(_id) {
    return axios.delete(`${url_users}${_id}`);
  }
}

這是我的posts_users.js 代碼

const express = require('express');
const mongodb = require('mongodb');
const router = express.Router();
var config = require('../../../config');

// Add User Post
router.post('/', async(req, res) => {
    const posts = await loadPostsCollection_Users();
    await posts.insertOne({         
        userID: req.body.userID,
        firstName: req.body.firstName, 
        lastName: req.body.lastName,               
        phoneNum: req.body.phoneNum,
        emailAddr: req.body.emailAddr,
        department: req.body.department,
        deviceName: req.body.deviceName,
        role: req.body.role,
        createdAt : req.body.createdAt,
        updatedAt : req.body.createdAt,
        createdVia:"Web",                
        status: req.body.status,            
        active: "false",
        max_temp: req.body.max_temp,
    });
    res.status(201).send();
});

// Modify User Post
router.patch('/:id', async(req, res) => {
    const posts = await loadPostsCollection_Users();
    await posts.updateOne(
        { "_id" : new mongodb.ObjectID(req.params.id) },
        {$set: {
            "userID": req.body.userID,
            "firstName": req.body.firstName, 
            "lastName": req.body.lastName,               
            "phoneNum": req.body.phoneNum,
            "emailAddr": req.body.emailAddr,
            "department": req.body.department,
            "deviceName": req.body.deviceName,
            "role": req.body.role,
            "updatedAt" : req.body.createdAt,
            "createdVia":"Web",                
            "status": req.body.status,            
            "active": "false",
            "max_temp": req.body.max_temp
        }},     
        { upsert: true }
    );
    res.status(201).send();
});
    
// Delete User Post
router.delete('/:id', async(req, res) => {
    const posts = await loadPostsCollection_Users();
    await posts.deleteOne({
        _id: new mongodb.ObjectID(req.params.id)
    });
    res.status(200).send();
});

async function loadPostsCollection_Users() {
    const client = await mongodb.MongoClient.connect(`mongodb://${config.DB_IPAddr}:${config.DB_PortNo}/tms`, {
        useNewUrlParser: true
    });
    return client.db('tms').collection('integrated_users');
}

module.exports = router;

最后這是我的 BE index.js 代碼

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

// Middleware
app.use(bodyParser.json());
app.use(cors());

const posts_users = require('./routes/api/posts_users');

app.use('/api/posts_users', posts_users);

// Handle production
if(process.env.NODE_ENV === 'production'){
    //Static folder
    app.use(express.static(__dirname + '/public/'));

    //Handle SPA
    app.get(/.*/, (req, res) => res.sendFile(__dirname + '/public/index.html'));
}

const port = process.env.PORT || 5002;
app.listen(port, () => console.log(`Server started on port ${port}`));

Answer 1

請確保在 Axios 調用期間正確附加了基礎 url。

常量 url_users = "api/posts_users/";