MEVN待办应用向Express API发POST请求时属性未定义问题

原错误：TypeError: Cannot read properties of undefined (reading 'todoItem') #

问题原因及修复 #

1. Express中间件配置错误
   你用app.set()来挂载body-parser是错误的，app.set()用于设置应用参数，中间件必须用app.use()挂载：

// server.js 修正部分
const express = require("express")
const bodyParser = require("body-parser")
const app = express()

// 替换原有的app.set为app.use
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))

2. Axios请求数据格式错误
   直接发送字符串this.todoItem，服务器无法解析为req.body.todoItem字段，需要包装成对象：

// Todo.vue中createPost方法修正
createPost() {
    console.log("Sending: " + this.todoItem)
    // 包装为对象发送
    axios.post("http://[SERVER]/todo", { todoItem: this.todoItem })
        .then((response)=> console.log(response))
        .catch((error)=> console.log(error))
}

新错误：跨域请求被阻止 #

问题原因及修复 #

这是浏览器的跨域安全限制导致的，需要在Express服务器中配置CORS允许跨域请求：

1. 安装cors依赖：

npm install cors

2. 在server.js中引入并使用：

const express = require("express")
const bodyParser = require("body-parser")
const cors = require("cors") // 引入cors
const app = express()

// 先挂载cors中间件
app.use(cors())
app.use(bodyParser.json())
app.use(bodyParser.urlencoded({extended: true}))

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