Vue.js注册表单POST数据至服务器失败问题求助

我正在搭建一个网站，无法通过POST请求将注册表单数据发送至服务器。我尝试使用Axios但未成功，以下是我的代码：

前端 Vue 注册页面代码 #

<template> 
  <div id = "app"> 
    <!-- <router-view /> --> 
    <h1>{{ $t('signup') }}</h1> 
    <p>{{ $t('signupMsg') }}</p> 
    <b-form @submit="onSubmit" @reset="onReset" method="post" > 
      <b-form-group id="input-group-1" label-for="input-1" > 
        <p1> Name: </p1> 
        <b-form-input id="input-1" v-model="form.name" required placeholder="Enter Name and Vorname" ></b-form-input> 
      </b-form-group> 
      <b-form-group id="input-group-2" label-for="input-2" > 
        <p1>{{ $t('tech') }}</p1> 
        <b-form-input id="input-2" v-model="form.technicianID" required placeholder="Enter assigned Technician ID" ></b-form-input> 
      </b-form-group> 
      <b-form-group id="input-group-3" label-for="input-3"> 
        <p1> Email ID: </p1> 
        <b-form-input id="input-3" v-model="form.email" required placeholder="Enter assigned Email ID" ></b-form-input> 
      </b-form-group> 
      <b-form-group id="input-group-4" label-for="input-4"> 
        <p1> {{ $t('branch') }} </p1> 
        <b-form-input id="input-4" v-model="form.branch" required placeholder="Enter your branch" ></b-form-input> 
      </b-form-group> 
      <b-button type="submit" >{{ $t('signup') }} </b-button> 
      <b-button type="reset" variant="danger">{{ $t('reset') }}</b-button> 
      <router-link to="/" class="btn btn-link">{{ $t('back') }}</router-link> 
    </b-form> 
  </div> 
</template> 

<script> 
import axios from 'vue-axios' 
export default { 
  name: 'signup', 
  data() { 
    return { 
      form: { 
        name: '', 
        technicianID: '', 
        email:'', 
        branch: '' 
      } 
    } 
  }, 
  methods: { 
    onSubmit(evt) { 
      evt.preventDefault() 
      axios({ 
        method: 'post', 
        url: '/insert', 
        data: this.form 
      }) 
      .then(function (response) { 
        //handle success 
        console.log(response); 
      }) 
      .catch(function (response) { 
        //handle error 
        console.log(response); 
      }); 
    }, 
    onReset(evt) { 
      evt.preventDefault() 
      // Reset our form values 
      this.form.name = '' 
      this.form.technicianID = '' 
      this.form.email = '' 
      this.form.branch = '' 
      // Trick to reset/clear native browser form validation state 
      this.show = false 
      this.$nextTick(() => { 
        this.show = true 
      }) 
    } 
  } 
} 
</script> 

<style scoped> 
</style>

后端路由 index.js 的 POST 处理代码 #

router.post('/insert', function(req, res, next) { 
  var item = { 
    name: req.body.name, 
    technicianID: req.body.technicianID, 
    email: req.body.email, 
    branch: req.body.branch 
  }; 
  mongo.connect(url, function(err, db) { 
    assert.equal(null, err); 
    db.collection('users').insertOne(item, function(err, result) { 
      assert.equal(null, err); 
      console.log('Item inserted'); 
      db.close(); 
    }); 
  }); 
  res.redirect('../components/requestsuccess'); 
});

我是新手，找不到数据发送至服务器的解决办法，请求帮助。

解决方案与排查步骤 #

作为新手，你遇到的问题大概率是几个常见的配置或逻辑问题，我们一步步来解决：

1. 后端必须配置请求体解析中间件 #

Express 默认不会自动解析 POST 请求中的 JSON 或表单数据，这会导致 req.body 为 undefined，根本拿不到前端传过来的数据。

在你的后端主文件（比如 app.js）中添加以下代码：

const express = require('express');
const app = express();

// 解析 JSON 格式的请求体
app.use(express.json());
// 解析 URL 编码的表单数据（兼容传统表单提交）
app.use(express.urlencoded({ extended: true }));

2. 修复 Axios 的错误处理逻辑 #

你当前的 catch 块打印的是 response，但实际上错误回调的参数是 error 对象，这样打印看不到真实的错误信息。修改前端的 onSubmit 方法：

onSubmit(evt) {
  evt.preventDefault()
  axios({
    method: 'post',
    url: '/insert',
    data: this.form
  })
  .then((response) => {
    console.log('请求成功:', response);
    // 前端跳转成功页面（SPA 应该用路由跳转，不是后端重定向）
    this.$router.push('/requestsuccess');
  })
  .catch((error) => {
    // 打印完整错误信息，方便定位问题
    console.error('请求出错:', error);
    alert('注册失败，请稍后重试');
  });
}

3. 后端重定向不适合 Vue SPA #

你的后端用了 res.redirect('../components/requestsuccess')，但 Vue 是单页应用，后端重定向不会触发前端路由跳转，反而会让 Axios 收到一个重定向响应，导致逻辑混乱。

修改后端的 /insert 路由，返回 JSON 响应：

router.post('/insert', function(req, res, next) {
  var item = {
    name: req.body.name,
    technicianID: req.body.technicianID,
    email: req.body.email,
    branch: req.body.branch
  };
  mongo.connect(url, function(err, db) {
    // 替换 assert 为友好的错误处理，避免服务器崩溃
    if (err) {
      console.error('数据库连接失败:', err);
      return res.status(500).json({ success: false, message: '数据库连接失败' });
    }
    db.collection('users').insertOne(item, function(err, result) {
      // 无论成功失败都要关闭数据库连接
      db.close();
      if (err) {
        console.error('插入数据失败:', err);
        return res.status(500).json({ success: false, message: '注册失败' });
      }
      console.log('Item inserted');
      res.status(200).json({ success: true, message: '注册成功' });
    });
  });
});

4. 确保 Axios 正确配置基础 URL #

如果你的前端运行在 http://localhost:8080，后端在 http://localhost:3000，那么直接请求 /insert 会指向前端的地址，导致 404 或跨域问题。

在 main.js 中配置 Axios 的基础 URL：

import Vue from 'vue';
import axios from 'axios';
import VueAxios from 'vue-axios';

Vue.use(VueAxios, axios);
// 设置后端服务的基础 URL
axios.defaults.baseURL = 'http://localhost:3000';

5. 解决跨域问题 #

如果前端和后端端口不同，浏览器会阻止跨域请求，需要在后端配置 CORS：

首先安装 cors 包：

npm install cors

然后在后端主文件中添加：

const cors = require('cors');
app.use(cors());

6. 检查 MongoDB 连接字符串 #

确保 url 变量是正确的 MongoDB 连接地址，比如本地数据库：

const url = 'mongodb://localhost:27017/your-database-name'; // 替换为你的数据库名

完成以上步骤后，重新启动前后端服务，应该就能正常发送表单数据并完成注册流程了。

内容的提问来源于stack exchange，提问作者Stayne