需要把post请求Request Payload改成Form Data

方案一:使用qs(推荐)

安装qs模块

npm install qs --save-dev

引入一下

import qs from 'qs'

方案二

axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {
    let src = ''
    for (let item in data) {
      src += encodeURIComponent(item) + '=' + encodeURIComponent(data[item]) + '&'
    }
    return src
}]

修改后的request.js

import axios from 'axios'
import qs from 'qs'
import {
	MessageBox,
	Message
} from 'element-ui'
import store from '@/store'
import {
	getToken
} from '@/utils/auth'

// create an axios instance
const service = axios.create({
	// baseURL: process.env.VUE_APP_BASE_API,
	// withCredentials: true,
	timeout: 5000, // request timeout
	responseType: 'json',
})

service.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
service.defaults.headers.get['Content-Type'] = 'application/x-www-form-urlencoded';

// request interceptor
service.interceptors.request.use(
	config => {
		if (store.getters.token) {
			config.headers['token'] = getToken()
		}

		// 在封装过后的axios对象中,post的参数需要用data来接收,而get的参数用params接收
		if (config.method == 'post') {
			if (config.data == undefined) {
				config.data = {}
			} else {
				// 把Request Payload 转为 Form Data
				config.data = qs.stringify(config.data);
			}
		} else {
			if (config.params == undefined) {
				config.params = {}
			}
		}

		return config
	},
	error => {
		console.log(error)
		return Promise.reject(error)
	}
)

// response interceptor
service.interceptors.response.use(
	response => {
		const res = response.data
		if (res.code == 1) {
			Message({
				message: res.message || 'Error',
				type: 'error',
				duration: 5 * 1000
			})
			return Promise.reject(new Error(res.message || 'Error'))
		} else {
			return res
		}
	},
	error => {
		console.log('err' + error)
		Message({
			message: error.message,
			type: 'error',
			duration: 5 * 1000
		})
		return Promise.reject(error)
	}
)

export default service

GitHub 加速计划 / vu / vue-element-admin
87.26 K
30.42 K
下载
PanJiaChen/vue-element-admin: 是一个基于 Vue.js 和 Element UI 的后台管理系统模板,支持多种数据源和插件扩展。该项目提供了一个完整的后台管理系统模板,可以方便地实现后台管理系统的快速搭建和定制,同时支持多种数据源和插件扩展。
最近提交(Master分支:2 个月前 )
0caa975e - 2 年前
cd3f7267 - 2 年前
Logo

旨在为数千万中国开发者提供一个无缝且高效的云端环境,以支持学习、使用和贡献开源项目。

更多推荐