欧美一区二区三区老妇人-欧美做爰猛烈大尺度电-99久久夜色精品国产亚洲a-亚洲福利视频一区二区

axios異步提交表單數(shù)據(jù)的幾種方法

踩坑Axios提交form表單幾種格式

成都創(chuàng)新互聯(lián)專注于零陵企業(yè)網(wǎng)站建設(shè),響應(yīng)式網(wǎng)站開發(fā),商城開發(fā)。零陵網(wǎng)站建設(shè)公司,為零陵等地區(qū)提供建站服務(wù)。全流程定制網(wǎng)站，專業(yè)設(shè)計，全程項目跟蹤，成都創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)

前后端分離的開發(fā)前后端, 前端使用的vue,后端的安全模塊使用的SpringSecurity,使用postman測試后端的權(quán)限接口時發(fā)現(xiàn)都正常,但是使用vue+axios發(fā)送異步的請求后端一直獲取不出axios提交的form表單的數(shù)據(jù),爬坑兩個半鐘頭找到了答案

axios用post異步形式提交的數(shù)據(jù)和我們直接使用from表單提交的數(shù)據(jù)的格式(Form Data格式)是不一樣的,在下面列舉

默認(rèn)格式Request Payload

直接使用axios發(fā)送異步請求,沒任何處理的代碼如下:

const service = axios.create({})

doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo
 })

這種方式提交的表單格式是默認(rèn)是RequestPayload, 它的長下面這個樣子

axios異步提交表單數(shù)據(jù)的幾種方法

可以看到,它的Contet-type是 "Content-Type": "application/json;"
但是后臺的SpringSecurity對這種結(jié)果可不買單,在Request中解析不出任何數(shù)據(jù)來

處理成Form Data格式

使用插件qs, 安裝命令如下:

npm install --save qs

請求編碼:

const service = axios.create({})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
 })
 }
 
 或者
 
 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo ,
  transformRequest: [function (data) {
  data = qs.stringify(data);
  return data;
  }],
 })
 }

經(jīng)過這樣處理的表單數(shù)據(jù)長成下面的這樣, 這也是我們最常用的Form Data格式,這種格式的數(shù)據(jù)可以從后臺的HttpRequest中把提交的屬性解析出來

axios異步提交表單數(shù)據(jù)的幾種方法

其他類型的Content-Type對應(yīng)的表單數(shù)據(jù)格式

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
  })
 }

它長這樣

axios異步提交表單數(shù)據(jù)的幾種方法

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: pojo
  })
 }
---

axios異步提交表單數(shù)據(jù)的幾種方法

const service = axios.create({
 headers: {
  "Content-Type": "multipart/form-data; charset=utf-8;"
  }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data:pojo
  })
 }

axios異步提交表單數(shù)據(jù)的幾種方法

const service = axios.create({
 headers: {
  "Content-Type": "application/x-www-form-urlencoded; charset=utf-8;"
 }
})

 doLogin (pojo) {
 return request({
  url: '/api/user/login',
  method: 'post',
  data: qs.stringify(pojo)
 })
 }

axios異步提交表單數(shù)據(jù)的幾種方法

總結(jié)

以上就是這篇文章的全部內(nèi)容了，希望本文的內(nèi)容對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，謝謝大家對創(chuàng)新互聯(lián)的支持。

標(biāo)題名稱：axios異步提交表單數(shù)據(jù)的幾種方法
文章分享：http://www.chinadenli.net/article2/pideoc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供小程序開發(fā)、微信公眾號、做網(wǎng)站、面包屑導(dǎo)航、自適應(yīng)網(wǎng)站、ChatGPT

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會在第一時間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)

成都網(wǎng)站建設(shè)公司