axios 使用post方式傳遞參數,後端接受不到

最近作vue項目,作圖片上傳的功能,使用get給後臺發送數據,後臺能收到,使用post給後臺發送圖片信息的時候,
vue axios post請求發送圖片base64編碼給後臺報錯HTTP 錯誤 414
請求一直報錯,顯示 request URI too large
後臺顯示一直沒有收到數據 參數爲null。網上查看了不少資料,才知道axios post傳參的問題。vue

this.$axios({
    method: 'post',
    url:url,
    params: {
        is_iso:1,
        goods_id:goods_id
    }
}).then((res)=>{

})

一開始我是這麼寫的 ,post裏面的數據放在params裏面,這樣是有問題的,在使用axios時,要注意到配置選項中包含params和data二者,覺得他們是相同的,實則否則。
由於params是添加到url的請求字符串中的,用於get請求。
而data是添加到請求體(body)中的, 用於post請求。jquery

而後我把params改成了data,後臺仍是接收不到,查閱了不少資料,須要把Content-Type爲application/x-www-form-urlencoded,
jquery在執行post請求時,會設置Content-Type爲application/x-www-form-urlencoded,因此服務器可以正確解析,而使用原生ajax、axios請求時,若是不顯示的設置Content-Type,那麼默認是text/plain,這時服務器就不知道怎麼解析數據了,因此才只能經過獲取原始數據流的方式來進行解析請求數據。ios

解決辦法:ajax

1、URLSearchParams

一、在main.js裏 設置配置,修改Content-Typespring

import axios from 'axios';
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
Vue.prototype.$axios = axios;

二、在組件vue裏npm

const url ='http://****你的接口****';
var params = new URLSearchParams();
params.append('key1', 'value1');       //你要傳給後臺的參數值 key/value
params.append('key2', 'value2');
params.append('key3', 'value3');
this.$axios({
    method: 'post',
    url:url,
    data:params
}).then((res)=>{
    
});

這樣後臺就收到數據了 請求成功;不過這個方法兼容性很是很差,ie瀏覽器徹底不兼容。
圖片描述axios

2、使用qs

安裝qs,在 main.js裏引入segmentfault

import axios from 'axios';
import qs from 'qs';
Vue.prototype.$qs = qs;

在vue組件裏面請求方法瀏覽器

let postData = this.$qs.stringify({
    key1:value1,
    key2:value2,
    key3:value3,
});
this.$axios({
    method: 'post',
    url:'url',
    data:postData
}).then((res)=>{
    
});

這樣就ok了服務器

參考資料:
axios發送post請求,springMVC接收不到數據問題

vue 添加axios組件,解決post傳參數爲null問題

axios

vue axios 傳參

AJAX POST請求中參數以form data和request payload形式在servlet中的獲取方式

相關文章
相關標籤/搜索