Vue-axios-post數(shù)據(jù)后端接不到問題解決
1 前言
最近在前后端聯(lián)調(diào)的時(shí)候發(fā)現(xiàn)了一個(gè)問題,可能自己平時(shí)不注意發(fā)送的內(nèi)容格式,導(dǎo)致解決問題的路上,走了很多彎路,尤其是在剛剛懂了一點(diǎn)Vue知識(shí)之后,發(fā)送請(qǐng)求的各種花式寫法也是讓人頭大,我在這把我踩到的坑給大家介紹一下吧。
2 問題
這個(gè)問題是我前端登錄的時(shí)候向后端發(fā)生post請(qǐng)求。在使用這個(gè)接口前,我使用 postman 確認(rèn)過了幾次,接口傳參是沒有問題的,而且使用params或者body傳參都是能接收到的。然而還是報(bào)錯(cuò)了……我們先來看看一個(gè)截圖吧。
我向后端發(fā)參數(shù)的時(shí)候無論如何我都接不到數(shù)據(jù),然后我就開始各種懷疑和猜測
( a )后端接口問題
如果是后端接口問題,那么我用postman接到了呀,所以這一條雖然我不信,但是我還是去各種嘗試修改,我修改的接口傳遞方式,我懷疑是不是跨域失敗,然而都沒能解決我的問題。
( b )懷疑跨域未成功
我仔細(xì)檢查了是否存在全局代理(各種代理工具)
是否存在nodejs本身問題
( c )發(fā)送參數(shù)問題
我的請(qǐng)求代碼如下:
axios.post('/api/home/login',{
params: {
username: this.username,
password: this.password
}
}).then(this.handleLoginSucc)
我自認(rèn)為沒有問題,但是又不敢確定,于是我又換了一種寫法
// main.js配置
import axios from 'axios'
// 配置請(qǐng)求的根路徑
axios.defaults.baseURL = 'http://localhost:8088/caeser/'
Vue.prototype.$http = axios
// 代碼調(diào)用
// 設(shè)置同步方法 async
const{ data: res } await this.$http.post('users', { params: this.queryInfo })
然而并不能解決我的問題,因?yàn)榘l(fā)送的內(nèi)格式依然沒有變化。
最后我找了解決辦法,而且確定了內(nèi)容格式是formdata
3 解決辦法
3.1 辦法1
var params = new URLSearchParams()
// 參數(shù)保存
params.append('username', this.loginForm.username)
params.append('password', this.loginForm.password)
// post發(fā)送
axios.post('/api/home/login', params).then(this.handleLoginSucc)
這次我就能接到了,我們看看內(nèi)容格式是什么
Content-type依然是application/json,但是數(shù)據(jù)格式變成了 Form Data,于是問題迎刃而解了。
這個(gè)問題困擾了我兩天,算是吸取一個(gè)教訓(xùn)吧,復(fù)習(xí)了一下請(qǐng)求方面的知識(shí),算是有所進(jìn)步了。
3.1.1 兼容性
有個(gè)很重要提醒:所有瀏覽器都不支持URLSearchParams,但是有一個(gè)polyfill可用(確保polyfill全局環(huán)境)
// 安裝 // npm install url-search-params-polyfill --save
ES2015+
import 'url-search-params-polyfill';
3.2 辦法2
這個(gè)辦法我建議使用,因?yàn)榭梢越鉀Q兼容性問題
使用qs庫對(duì)數(shù)據(jù)進(jìn)行編碼
var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });
使用qs庫編碼發(fā)送請(qǐng)求后端也是可以接收到的。
3.3 辦法3
不推薦使用
axios.post(url,{data:{},
headers:{content-type:'application/x-www-form-unlencoded'}
})
4 Request payload 和 FormData 區(qū)別
FormData和Payload是瀏覽器傳輸給后端接口的兩種內(nèi)容格式,這兩種方式瀏覽器是通過Content-Type來進(jìn)行區(qū)分的,如果是 application/x-www-form-urlencoded的話,則為formdata方式,如果是application/json或multipart/form-data的話,則為 request payload
下面內(nèi)容為后端內(nèi)容
4.1 后端代碼如何處理這兩種格式
Request payload
對(duì)于 Request Payload 請(qǐng)求, 必須加 @RequestBody 才能將請(qǐng)求正文解析到對(duì)應(yīng)的 bean 中,且只能通過 request.getReader() 來獲取請(qǐng)求正文內(nèi)容
Form Data
無需任何注解,springmvc 會(huì)自動(dòng)使用 MessageConverter 將請(qǐng)求參數(shù)解析到對(duì)應(yīng)的 bean,且通過 request.getParameter(…) 能獲取請(qǐng)求參數(shù)
我自己后端代碼就是因?yàn)闆]有使用 request.getReader() 來獲取,才出現(xiàn)的問題
上面內(nèi)容為后端內(nèi)容
5 復(fù)習(xí)js和jquery的請(qǐng)求
jquery的請(qǐng)求很方便,格式很清晰
$.ajax({
url : targeturl,
type : 'POST',
data : formData,
contentType : false,
processData : false,
cache : false,
success : function(data) {
if (data.success) {
// success
} else {
// error
}
}
});
JavaScript
function sendData(data) {
var XHR = new XMLHttpRequest();
var urlEncodedData = "";
var urlEncodedDataPairs = [];
var name;
// 將數(shù)據(jù)對(duì)象轉(zhuǎn)換為URL編碼的鍵/值對(duì)數(shù)組。
for(name in data) {
urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
}
urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
// 定義成功數(shù)據(jù)提交時(shí)發(fā)生的情況
XHR.addEventListener('load', function(event) {
//
});
// 定義錯(cuò)誤提示
XHR.addEventListener('error', function(event) {
//
});
// 建立我們的請(qǐng)求
XHR.open('POST', 'https://example.com/cors.php');
// 為表單數(shù)據(jù)POST請(qǐng)求添加所需的HTTP頭
XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
// 最后,發(fā)送我們的數(shù)據(jù)。
XHR.send(urlEncodedData);
}
6 Axios知識(shí)點(diǎn)
6.1 全局默認(rèn)值
axios.defaults.baseURL = 'https://caeser.com'; axios.defaults.headers.common['Authorization'] = AUTH_TOKEN; axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
6.2 攔截器
//添加請(qǐng)求攔截器
axios.interceptors.request.use(function(config){
// before success
// must return config
// 必須返回config
return config;
}, function(error){
// error
})
//添加響應(yīng)攔截器
axios.interceptors.response.use(function(response){
//
return response;
},function(error){
// error
});
或者自定義實(shí)體
var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});
7 總結(jié)
在學(xué)習(xí)vue的過程中是非常容易的,因?yàn)関ue真的很方便使用,學(xué)起來很快,都是模板語法,直接COPY就行了,而且邏輯性很簡單,就是在使用的時(shí)候,各種版本和插件要學(xué)會(huì)調(diào)試,多嘗試多使用,而且為了好好寫前端,我都下載了離線的CSS樣式文件,因?yàn)楹芏鄻邮轿叶紱]背下來,而且很多樣式我都不知道,有很多新的好用的特性,都是值得使用的。
以上就是本文的全部內(nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持我們。
欄 目:JavaScript
下一篇:nuxt配置通過指定IP和端口訪問的實(shí)現(xiàn)
本文標(biāo)題:Vue-axios-post數(shù)據(jù)后端接不到問題解決
本文地址:http://www.jygsgssxh.com/a1/JavaScript/9248.html
您可能感興趣的文章
- 04-02java后端代碼分頁 java后端實(shí)現(xiàn)分頁page
- 01-10js數(shù)據(jù)類型轉(zhuǎn)換與流程控制操作實(shí)例分析
- 01-10利用JS如何獲取form表單數(shù)據(jù)
- 01-10JS精確判斷數(shù)據(jù)類型代碼實(shí)例
- 01-10JS數(shù)據(jù)類型STRING使用實(shí)例解析
- 01-10微信小程序跨頁面數(shù)據(jù)傳遞事件響應(yīng)實(shí)現(xiàn)過程解析
- 01-10Vuex實(shí)現(xiàn)數(shù)據(jù)共享的方法
- 01-10js正則匹配多個(gè)全部數(shù)據(jù)問題
- 01-10使用JavaScript計(jì)算前一天和后一天的思路詳解
- 01-10Vue+Node服務(wù)器查詢Mongo數(shù)據(jù)庫及頁面數(shù)據(jù)傳遞操作實(shí)例分析


閱讀排行
本欄相關(guān)
- 04-02javascript點(diǎn)線,點(diǎn)線的代碼
- 04-02javascript潛力,javascript強(qiáng)大嗎
- 04-02javascript替換字符串,js字符串的替換
- 04-02javascript移出,js 移入移出
- 04-02包含javascript舍的詞條
- 04-02javascript并行,深入理解并行編程 豆瓣
- 04-02javascript匿名,js匿名方法
- 04-02javascript警報(bào),JavaScript警告
- 04-02javascript遮蓋,JavaScript遮蓋PC端頁面
- 04-02javascript前身,javascript的前身
隨機(jī)閱讀
- 08-05織夢dedecms什么時(shí)候用欄目交叉功能?
- 01-10使用C語言求解撲克牌的順子及n個(gè)骰子
- 04-02jquery與jsp,用jquery
- 01-10SublimeText編譯C開發(fā)環(huán)境設(shè)置
- 08-05dedecms(織夢)副欄目數(shù)量限制代碼修改
- 01-10delphi制作wav文件的方法
- 01-11Mac OSX 打開原生自帶讀寫NTFS功能(圖文
- 08-05DEDE織夢data目錄下的sessions文件夾有什
- 01-10C#中split用法實(shí)例總結(jié)
- 01-11ajax實(shí)現(xiàn)頁面的局部加載


