詳解解決使用axios發(fā)送json后臺(tái)接收不到的問(wèn)題
問(wèn)題描述
按照axios官網(wǎng)例子發(fā)起請(qǐng)求傳遞json，后臺(tái)接受到的數(shù)據(jù)為空，一直卡在options階段。
嘗試的方法
開始以為是接口有問(wèn)題，使用postman測(cè)試下，一切正常，百思不得其解，看了好多issue也解決不了，加了headers:{'content-type':'application/json'}也沒用。
官網(wǎng)上是說(shuō)，傳json就按application/json進(jìn)行處理，然而并沒有卵用；之后套了一層JSON.stringify(data) ，content-type又變成表單格式了==。
然后翻自己之前的代碼，發(fā)現(xiàn)寫法如出一轍，懷疑是版本號(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ù)類型卡的太死了，還有polyfill的問(wèn)題就放棄了，如果有知道的小伙伴請(qǐng)留言告訴我，謝謝），實(shí)在不行就ajax（還要封裝成promise，哭）。出于對(duì)axios的堅(jiān)持，終于找到了解決方法。
解決方法
就是添加qs庫(kù)，將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;
});
}
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
uniapp使用scroll-view下拉刷新無(wú)法取消的坑及解決
這篇文章主要介紹了uniapp使用scroll-view下拉刷新無(wú)法取消的坑及解決,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-05-05
這篇文章主要介紹了Vue路由切換頁(yè)面不更新問(wèn)題解決方案,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-07-07
Vue3前端做打印頁(yè)面信息實(shí)現(xiàn)打印功能(打印界面某個(gè)部分)
這篇文章主要介紹了如何使用vue3-print-nb依賴在Vue?3項(xiàng)目中實(shí)現(xiàn)頁(yè)面打印功能,提供了完整的代碼示例,大家可以根據(jù)項(xiàng)目需求選擇合適的打印方法,需要的朋友可以參考下2025-02-02
vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能
增刪改查是我們寫項(xiàng)目百分之七十會(huì)遇到的代碼,下面這篇文章主要給大家介紹了關(guān)于vue前端實(shí)現(xiàn)表格數(shù)據(jù)增查改刪功能的相關(guān)資料,文中通過(guò)代碼介紹的非常詳細(xì),需要的朋友可以參考下2024-05-05
作為使用Vue已經(jīng)很多年的人，特別是去年一直在使用?Vue3，因此，學(xué)到了很多東西。所以本文為大家準(zhǔn)備了7個(gè)讓我們成為更好?Vue?開發(fā)者的技巧，需要的可以參考一下2022-06-06
vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法
這篇文章主要介紹了vue使用keep-alive保持滾動(dòng)條位置的實(shí)現(xiàn)方法，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-04-04
Vue利用路由鉤子token過(guò)期后跳轉(zhuǎn)到登錄頁(yè)的實(shí)例
下面小編就為大家?guī)?lái)一篇Vue利用路由鉤子token過(guò)期后跳轉(zhuǎn)到登錄頁(yè)的實(shí)例。小編覺得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-10-10
本篇文章主要介紹了VueJs 將接口用webpack代理到本地的方法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-11-11
本篇文章主要介紹了解決Vue固定滾動(dòng)位置的處理辦法，小編覺得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-07-07
vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)垂直無(wú)限滑動(dòng)日歷組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-04-04