我用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) 轉換請求體

結果