在vue中使用axios中的post請求時, 如何將json數據改爲formdata類型

有些時候在用ajax發送post請求時 ,數據如下圖⬇️

在使用axios時的默認請求如下圖 ⬇️

content-Type : application/json 請求體類型默認是json格式
就連發送的數據也是 request payload 的

* 那麼問題來了, 怎麼才能讓 axios 發送 post 請求時變得和 ajax 發送 post 請求的一樣呢 ?

解決方法⬇️

1. 首先我們可以在main.js中將axios的默認headers修改成我們需要發送的類型

axios.defaults.withCredentials = true; //讓ajax攜帶cookie
axios.defaults.headers = {
  'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8'
};

修改之後, 我們發送的post請求就變成我們想要的格式, 但是formdata中的內容卻轉化成了json格式, 並且在最後還多了一個 : (冒號)

{"username":"admin3","password":"admin123"}: 

2. 要想將formdata中的內容轉化爲對象, 我們需要操作兩步, 首先在main.js中引入QS模塊

// 引入 axios 和 Qs
import axios from 'axios'
import Qs from 'qs'

Vue.prototype.$http = axios
Vue.prototype.qs = Qs

其次, 在使用axios發送post請求時, 將對象用qs.stringify轉化之後就OK了

this.$http({
	method:"post",
  	url:'http://dsp.mindhit.cn/boss_login/',
  	data:this.qs.stringify(this.ruleForm)
})
.then((function (response) {
  	console.log(response);
  	if(response.data.code!==0){
    	alert(response.data.msg)
  	}else{
    	this.menu=response.data.data
    	console.log(this.menu);
    	this.$router.push({path:'/HelloWorld'})  
  	}
}).bind(this))
.catch(function (error) {
  console.log(error);
});

現在這個請求就變成了這個亞子