快捷導(dǎo)航

一文詳解如何處理axios請(qǐng)求中post請(qǐng)求的坑

更新時(shí)間：2026年04月03日 11:07:38 作者：用戶8304071305701

在vue項(xiàng)目中,使用axios發(fā)送post請(qǐng)求時(shí),根據(jù)不同的業(yè)務(wù)場(chǎng)景和數(shù)據(jù)格式要求,需要采用不同的傳參方式,這篇文章主要介紹了如何處理axios請(qǐng)求中post請(qǐng)求坑的相關(guān)資料,需要的朋友可以參考下

一、問(wèn)題描述

用 axios.post() 直接傳對(duì)象，后端收不到數(shù)據(jù)。
原因是 axios 默認(rèn)會(huì)把 POST 數(shù)據(jù)序列化為 JSON 格式，而很多后端（尤其是老項(xiàng)目）默認(rèn)只識(shí)別 application/x-www-form-urlencoded 格式（即表單格式）。
所以數(shù)據(jù)被 “攔截” 了，本質(zhì)是前后端數(shù)據(jù)格式不兼容，而不是 axios 主動(dòng)攔截

二、代碼示例：為什么直接傳對(duì)象不行？

錯(cuò)誤寫法（后端收不到數(shù)據(jù)）

// 錯(cuò)誤示例：直接傳對(duì)象 
axios.post('/api/login', { 
    username: 'admin',
    password: '123456' }).then(res => { 
    console.log(res)
}).catch(err => { 
    console.error(err) 
})

問(wèn)題分析

axios 默認(rèn)設(shè)置 Content-Type: application/json，發(fā)送的是 JSON 字符串：

{ "username": "admin", "password": "123456" }

如果后端是用 PHP、Java 等傳統(tǒng)方式讀取 $_POST 或 request.getParameter()，它們默認(rèn)只解析 application/x-www-form-urlencoded 格式，所以讀不到 JSON 里的字段，表現(xiàn)為 “數(shù)據(jù)傳不過(guò)去”。

三、正確的解決方案（代碼實(shí)現(xiàn)）

方案一：使用 qs 庫(kù)，將數(shù)據(jù)轉(zhuǎn)為表單格式（推薦）

這是最穩(wěn)妥的方式，和后端傳統(tǒng)表單提交格式完全一致。

安裝 qs

npm install qs --save

封裝請(qǐng)求（推薦寫法）

import axios from 'axios' 
import qs from 'qs' 
// 創(chuàng)建實(shí)例 
const request = axios.create({ 
  baseURL: '/api', 
  timeout: 5000 
}) 
// 請(qǐng)求攔截器：統(tǒng)一處理 POST 數(shù)據(jù)格式 
request.interceptors.request.use(config => { 
// 只對(duì) POST 請(qǐng)求做處理 
    if (config.method === 'post' && config.data) { 
    // 將 JSON 對(duì)象轉(zhuǎn)為 application/x-www-form-urlencoded 格式 
    config.data = qs.stringify(config.data) 
    // 同時(shí)修改 Content-Type 頭（有些后端需要明確指定）
    config.headers['Content-Type'] = 'application/x-www-form-  urlencoded'
} 
  return config 
}, error => { 
  return Promise.reject(error) 
}) 
// 使用 
request.post('/login', { 
  username: 'admin', 
  password: '123456' 
})

發(fā)送的數(shù)據(jù)格式：

username=admin&password=123456

后端可以直接用 $_POST['username'] 或request.getParameter("username") 讀取。

方案二：手動(dòng)設(shè)置 FormData（適合上傳文件或混合數(shù)據(jù)）

const formData = new FormData() 
formData.append('username', 'admin') 
formData.append('password', '123456') 
axios.post('/api/login', formData, { 
    headers: { 
        'Content-Type': 'multipart/form-data' 
    }
})

適用場(chǎng)景

需要上傳文件（File 對(duì)象）
混合文本和文件數(shù)據(jù)

方案三：讓后端支持 JSON 格式（現(xiàn)代項(xiàng)目首選）

如果后端是 Node.js（Express），可以直接用中間件解析 JSON：

// 后端 Express 示例 
const express = require('express') 
const app = express() 
// 解析 JSON 格式的請(qǐng)求體 
app.use(express.json()) 
// 現(xiàn)在就能直接讀取 req.body.username 了 
app.post('/api/login', (req, res) => { 
    const { username, password } = req.body 
    res.send({ username, password }) 
})

前端代碼就可以保持最簡(jiǎn)潔的寫法：

axios.post('/api/login', { 
    username: 'admin', 
    password: '123456' 
})

四、總結(jié)：為什么說(shuō) “axios 有攔截功能”？

這句話其實(shí)是對(duì) “默認(rèn)行為” 的誤解：

axios 并沒(méi)有主動(dòng) “攔截” 你的數(shù)據(jù)，而是自動(dòng)做了序列化：
- GET 請(qǐng)求：自動(dòng)把參數(shù)拼到 URL 上。
- POST 請(qǐng)求：默認(rèn)把對(duì)象轉(zhuǎn)為 JSON，并設(shè)置 Content-Type: application/json。
當(dāng)后端不支持這種格式時(shí)，數(shù)據(jù)就 “傳不過(guò)去”，看起來(lái)像是被攔截了。

最佳實(shí)踐：