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