当前位置：首页 > news >正文

vue3+express联调接口时报“\“username\“ is required“问题

news 2025/7/12 13:19:27

我用node .js的express框架写的登录接口，发现postman可以调通，但是vue3前端报错
在这里插入图片描述
vue3

我发现是我后端node.js的app.js入口文件中配置的解析前端参数的解析中间件和前端请求头中的Content-Type配置不一致的原因
解决方案
因为我后端配置解析表单数据的中间件是express.urlencoded({ extended: false }),只能解析application/ x-www-from-urlencoded 格式的表单数据
在这里插入图片描述
所以第一种方法修改前端，后端不变
前端修改
登录接口修改添加这2个，如果你所有接口都是这种数据解析
把 “Content-Type”: “application/x-www-form-urlencoded”, 加载请求拦截器里也行，我这里是只说登录单个接口，所以把 “Content-Type”: "application/x-www-form-urlencoded"这个单独加到了登录里面为了测试
在这里插入图片描述
这是我的请求拦截器和相应拦截器的配置

import axios from 'axios'const http = axios.create({baseURL: 'http://localhost:5000', // 根据你的 Node 服务地址修改timeout: 10000,
})// 请求拦截器
http.interceptors.request.use(config => {// 可以在这里添加 token 等const token = localStorage.getItem('token')if (token) {config.headers.Authorization = `${token}`}// 确保已有 Authorization 头不被覆盖// if (token && !config.headers.Authorization) {// config.headers.Authorization = `${token}`;//}// // 如果请求体是对象且尚未设置 Content-Type// if (config.data && typeof config.data === 'object' &&//   !config.headers['Content-Type']) {//   config.//   headers['Content-Type'] = 'application/json;charset=utf-8';// }return config
}, error => {return Promise.reject(error)
})// 响应拦截器
http.interceptors.response.use(response => {console.log("请求成功:", response.config.url, response.data);// 解析JSON数据const data = typeof response.data === 'string' ?JSON.parse(response.data) :response.data;if (data.status && data.status !== 0) { // 0表示成功return Promise.reject(data);}return data;
}, error => {return Promise.reject(error)
})export default http

结果
在这里插入图片描述
第二种方法修改后端的中间件，前端不变
给后端代码添加
app.js文件中添加express.json解析application/json的中间件，前端代码不变

前端代码 headers[‘Content-Type’] = ‘application/json;charset=utf-8’;可以加可以不加，因为你发送的是一个 JavaScript 对象（credentials），
axios 会自动将请求头 Content-Type 设置为 application/json
使用 JSON.stringify(credentials) 转换请求体
在这里插入图片描述
结果