Vue前端无法向Node.js后端发送POST请求，请求状态异常排查

问题现象 #

• localhost:8080前端：请求返回200状态码，但控制台输出“Transmission failed”
• localhost:3000后端：Network面板显示200状态，但未接收到前端发送的请求数据，已排除缓存影响

已执行排查操作 #

1. 后端（localhost:3000）：已配置CORS、body-parser，数据库连接正常，GET请求可正常获取数据
2. 防火墙：关闭防火墙重试无效，已为8080、3000端口配置有效入站/出站规则
3. 已检查前后端代码

期望目标 #

从localhost:8080发送POST数据{name: "test2"}到localhost:3000，将test2插入到EASY表中

前后端代码 #

前端（localhost:8080，Vue） #

<template>
<div class="home">  

<h1>Test</h1>

<div class="user-add">
  <h2>Add user</h2>
  <input type="text" v-model="name" /> <br />
  <button @click="storeUser">Store</button>
</div>
</div>

</template>

<script>
import axios from "axios";

export default {
    name:'CRUD2',
    data() {
    return {
    user: {},  
    };
  },
  mounted() { 
  },
  methods: {
    async storeUser() {
  try {
    const user = await axios.post(
      "http://localhost:3000/easy", 
      {
        name: this.name,
      }
    );

      console.log(user)
    if (user.status === 201) {
      console.log("Transmission successful");
    } else {
      console.error("Transmission failed");
    }
  } catch (error) {
    console.error(error);
  }
},
    
}
};
</script>

后端（localhost:3000，Node.js + Express） #

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

app.use(express.json());
app.use(cors({
    origin: 'http://localhost:8080'
}))

/* 曾尝试手动配置CORS：
app.use(function(req, res, next) {
    req.header("Access-Control-Allow-Origin", "*");
    req.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.header("Access-Control-Allow-Origin", "*");
    res.header("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    next();
});*/
app.use(bodyParser.json());

oracledb.outFormat = oracledb.OUT_FORMAT_OBJECT;

//GET 接口
app.get("/easy", async (req, res) => {
    let con;

    try {
        con = await oracledb.getConnection({
            user: "user",
            password: "password",
            connectString: "h2922093.stratoserver.net:1521/orcl.stratoserver.net"
        });

        const data = await con.execute(`SELECT * FROM EASY`);
        res.json(data.rows);
    } catch (err) {
        console.error(err);
        res.sendStatus(500);
    } finally {
        if (con) {
            await con.close();
        }
    }
});


//POST 接口
app.post("/easy", async (req, res) => {
    let con;

    try {
        con = await oracledb.getConnection({
            user: "user",
            password: "password",
            connectString: "h2922093.stratoserver.net:1521/orcl.stratoserver.net"
        });

        
        const body = req.body;
        const sql = `INSERT INTO EASY (NAME) 
                   VALUES (:name)`;

        const result = await con.execute(sql, [
            body.name,

        ]);

        if(result.rowsAffected){
            res.send({
                message: `${result.rowsAffected} row(s) inserted`,
                status: 201
            })
        }else {
            res.sendStatus(500);
        }

        
    } catch (err) {
        console.error(err);
        res.sendStatus(500);
    } finally {
        if (con) {
            await con.close();
        }
    }
});


app.listen(3000, () => {
    console.log("Server started on http://localhost:3000");
}); 

问题分析与修复方案 #

1. 前端绑定字段未定义 #

前端模板中v-model="name"，但data里未声明name字段，导致请求发送时this.name为undefined，后端接收不到有效数据。

修复： 在data中添加name字段：

data() {
  return {
    user: {},
    name: '' // 新增绑定字段
  };
}

2. 后端响应状态码不匹配 #

后端使用res.send()返回数据时，HTTP响应状态码默认是200，而非响应体里的status:201。前端判断user.status ===201会失败，导致控制台输出失败提示。

修复： 明确设置响应状态码：

if(result.rowsAffected){
  res.status(201).send({ // 新增status(201)设置HTTP状态码
    message: `${result.rowsAffected} row(s) inserted`,
    status: 201
  })
}else {
  res.sendStatus(500);
}

3. OracleDB事务未提交 #

OracleDB执行insert操作后需手动提交事务，否则数据不会持久化到数据库，即使rowsAffected有值也无法看到插入结果。

修复： 在执行insert后添加事务提交：

const result = await con.execute(sql, [body.name]);
await con.commit(); // 新增事务提交

额外优化 #

后端同时使用app.use(express.json())和app.use(bodyParser.json())，两者功能重复（Express 4.16+自带JSON解析），保留express.json()即可，删除bodyParser.json()相关代码。

内容的提问来源于stack exchange，提问作者Viktor Légrádi Göhring