詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題
問(wèn)題描述
按照axios官網(wǎng)例子發(fā)起請(qǐng)求傳遞json，后臺(tái)接受到的數(shù)據(jù)為空，一直卡在options階段。
嘗試的方法
開(kāi)始以為是接口有問(wèn)題，使用postman測(cè)試下，一切正常，百思不得其解，看了好多issue也解決不了，加了headers:{'content-type':'application/json'}也沒(méi)用。
官網(wǎng)上是說(shuō)，傳json就按application/json進(jìn)行處理，然而并沒(méi)有卵用；之后套了一層JSON.stringify(data) ，content-type又變成表單格式了==。
然后翻自己之前的代碼，發(fā)現(xiàn)寫(xiě)法如出一轍，懷疑是版本號(hào)的問(wèn)題，然而并不是==。。。。考慮到可能和服務(wù)端有關(guān)系。
原代碼如下：
import axios from 'axios';
export default function request(url, params) {
return axios.post(`xxxxxx/${url}`, params)
.then((response) => {
console.log('response', response);
return response;
})
.catch((error) => {
console.log('error', error);
return error;
});
}
最后想想還是用fetch吧（確實(shí)用了，發(fā)現(xiàn)還是有這個(gè)問(wèn)題，現(xiàn)在深度懷疑是服務(wù)端將參數(shù)類(lèi)型卡的太死了，還有polyfill的問(wèn)題就放棄了，如果有知道的小伙伴請(qǐng)留言告訴我，謝謝），實(shí)在不行就ajax（還要封裝成promise，哭）。出于對(duì)axios的堅(jiān)持，終于找到了解決方法。
解決方法
就是添加qs庫(kù)，將json序列化之后傳遞，詳見(jiàn)這個(gè)issue。
代碼：
import axios from 'axios';
import qs from 'qs';
export default function request(url, params) {
return axios.post(`https://xxxxxxxx/${url}`, qs.stringify(params))
.then((response) => {
console.log('response', response);
return response;
})
.catch((error) => {
console.log('error', error);
return error;
});
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
vue進(jìn)入頁(yè)面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過(guò)程
這篇文章主要介紹了vue進(jìn)入頁(yè)面加載數(shù)據(jù)緩慢實(shí)現(xiàn)loading提示過(guò)程，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-08-08
這篇文章主要介紹了vue input框的禁用和可輸入問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
這篇文章主要為大家介紹了vue?請(qǐng)求攔截器的配置方法，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下，希望能夠給你帶來(lái)幫助2022-01-01
Vue3中關(guān)于getCurrentInstance的大坑及解決
這篇文章主要介紹了Vue3中關(guān)于getCurrentInstance的大坑及解決方案，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04
Vue前端利用slice()方法實(shí)現(xiàn)分頁(yè)器
分頁(yè)功能是常見(jiàn)的需求之一，本文主要介紹了Vue前端利用slice()方法實(shí)現(xiàn)分頁(yè)器，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2023-07-07
$emit是Vue實(shí)例的一個(gè)方法,它用于觸發(fā)自定義事件,本文主要為大家詳細(xì)介紹了Vue如何使用$emit進(jìn)行組件通信,感興趣的小伙伴可以跟隨小編咦學(xué)習(xí)一下2023-12-12
從零開(kāi)始學(xué)Vue，通過(guò)一些例子，讓大家概覽一些基本的概念和特性，理解Vue的基礎(chǔ)知識(shí),具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-10-10
vue使用echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)排序效果
echarts在前端開(kāi)發(fā)中實(shí)屬必不可缺的大數(shù)據(jù)可視化工具,這篇文章主要為大家詳細(xì)介紹了vue如何使用echarts實(shí)現(xiàn)柱狀圖動(dòng)態(tài)排序效果,感興趣的可以了解下2023-10-10
這篇文章主要介紹了Vue文本模糊匹配功能如何實(shí)現(xiàn),文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
vue 中監(jiān)聽(tīng)生命周期事件的操作方式
vue2 提供了一些生命周期事件的方式,在組件銷(xiāo)毀后觸發(fā)一個(gè)事件,父組件可監(jiān)聽(tīng)到該事件,然后執(zhí)行某些操作,這篇文章主要介紹了vue 中監(jiān)聽(tīng)生命周期事件的操作方式,需要的朋友可以參考下2024-06-06