Axios向后端提交数据的参数格式是json,而并非用的是form传参,post表单请求提交时,使用的Content-Type是application/x-www-form-urlencoded,而使用原生AJAX的POST请求如果不指定请求头RequestHeader,默认使用的Content-Type是text/plain;charset=UTF-8。

axios 请求配置中,transformRequest配置允许在向服务器发送前,修改请求数据。

  // `transformRequest` 允许在向服务器发送前,修改请求数据
// 只能用在 'PUT', 'POST' 和 'PATCH' 这几个请求方法
// 后面数组中的函数必须返回一个字符串,或 ArrayBuffer,或 Stream
transformRequest: [function (data) {
// 对 data 进行任意转换处理 return data;
}],

可以使用该配置修改请求参数。

参考资料:https://www.kancloud.cn/yunye/axios/234845

如下是axios的两种方法

方法一:

this.axios({
url: '/user',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
transformRequest: [function (data) {
// Do whatever you want to transform the data
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
})

当然可以在main.js中进行配置

// main.js

import Axios from 'axios'
import VueAxios from 'vue-axios' const MyAxios = Axios.create({
transformRequest: [function (data) {
// 将数据转换为表单数据
let ret = ''
for (let it in data) {
ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
}
return ret
}],
headers: {
'Content-Type': 'application/x-www-form-urlencoded'
}
}) Vue.use(VueAxios, MyAxios)

参考链接:https://segmentfault.com/q/1010000008462977

方法二:使用qs模块/querystring模块

//import qs from 'querystring'
import qs from 'qs'
//export default{ .. }
this.axios({
url: '/user',
method: 'post',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
},
transformRequest: [function (data) {
data = qs.stringify(data);
return data;
}],
headers:{'Content-Type':'application/x-www-form-urlencoded'}
})
})

此方法操作前,需要先安装qs

npm install --save qs

参考链接:https://blog.csdn.net/shooke/article/details/76038967

axios的post请求方法---以Vue示例的更多相关文章

  1. vue 使用 axios 时 post 请求方法传参无法发送至后台

    axios 时 post 请求方法传参无法发送至后台报错如下 Response to preflight request doesn't pass access control check: No ' ...

  2. axios浏览器异步请求方法封装 XMLHttpRequest

    axios学习笔记defaults(浏览器端异步请求处理方式) 浏览器异步请求方法封装,主要使用XMLHttpRequest lib/adapters/xhr.js //入口 var utils = ...

  3. vue使用axios进行ajax请求

    以前都用resource进行ajax请求,现在官方推荐使用axios,所以现在更换插件.这篇文章主要描写如何在项目中引入axios以及简单地使用axios进行ajax请求. 第一步,需要通过npm安装 ...

  4. Vue-cli3.x中使用Axios发送跨域请求的配置方法

    Vue-cli3.x中使用Axios发送跨域请求的配置方法 安装axios npm i axios -s main.js中引入 import axios from 'axios' //将axios挂载 ...

  5. $Django 前后端之 跨域问题(同源策略) vue项目(axios跨域请求数据)

    1 跨域问题(多个域之间的数据访问) #同源策略(ip port 协议全部相同) #本站的只能请求本站域名的数据 #CORS实现(跨域资源共享) #实现CORS通信的关键是服务器.只要服务器实现了CO ...

  6. vue使用axios发送数据请求

    本文章是基于vue-cli脚手架下开发 1.安装 npm install axios --s npm install vue-axios --s 2.使用.在index.js中(渲染App组件的那个j ...

  7. axios get及post方法代码示例&&方法封装

    axios get及post方法代码示例 get方法: show: function(){ //get方式 //赋值给变量self var self = this; var url = "h ...

  8. Vue简单封装axios—解决post请求后端接收不到参数问题

    1.在src/下新建api文件夹,api/下新建index.js和public.js 在public.js中: import axios from 'axios'; import qs from 'q ...

  9. vue使用axios发送post请求时的坑及解决原理

    前言:在做项目的时候正好同事碰到了这个问题,问为什么用axios在发送请求的时候没有成功,请求不到数据,反而是报错了,下图就是报错请求本尊 vue里代码如下: this.$http.post('/ge ...

随机推荐

  1. AI决策算法 之 GOAP (三)

    源码地址:http://pan.baidu.com/s/1dFwzmfB 这篇我们使用上篇文章写的GOAP框架来完成一个实例: 实例内容: AI有10HP, 需要去站岗,站岗完成扣5HP 当HP< ...

  2. 洛谷 P2731 骑马修栅栏 Riding the Fences

    P2731 骑马修栅栏 Riding the Fences 题目背景 Farmer John每年有很多栅栏要修理.他总是骑着马穿过每一个栅栏并修复它破损的地方. 题目描述 John是一个与其他农民一样 ...

  3. Request a certificate from a certificate vendor

    Request a certificate from a certificate vendor Now, with your CSR in hand, visit the Web site of yo ...

  4. Visio画图(一):UML用例图

    Visio画图(一):UML用例图 1.找到UML用例图 A.有网状态 第一步 在搜索框内输入用例图进行搜索. 第二步,移动鼠标直到找到用例图 B.无网状态 第一步 点击特别推荐旁的类别选项 第二步 ...

  5. Glassfish 设置时区

    对于Glassfish domain 或者instance下,某个日志的时区不对,前提是系统时区争取. 可以尝试通过如下命令查看jvm 时区设置 asadmin list-jvm-options 如果 ...

  6. Luogu P1447 [NOI2010]能量采集 数论??欧拉

    刚学的欧拉反演(在最后)就用上了,挺好$qwq$ 题意:求$\sum_{i=1}^{N}\sum_{j=1}^{M}(2*gcd(i,j)-1)$ 原式 $=2*\sum_{i=1}^{N}\sum_ ...

  7. Codeforces 1168C(二进制、dp)

    要点 '&'操作暗示二进制上按位思考 对于y为1的位,要求x和y之间要至少有两个此位为1的(包含x.y),这样&起来才不是0.而这些位中只要存在一个是ok的即可 dp去求每个x的每个位 ...

  8. hadoop分布式存储(2)-hadoop的安装

    总共分三步:1.准备linux环境 租用“云主机”,阿里云,unitedStack等,云主机不受本机性能影响(或者直接安转linux操作系统或者虚拟机也行): PuTTy Configuration ...

  9. NET full stack framework

    NFX UNISTACK 介绍 学习.NET Core和ASP.NET Core,偶然搜索到NFX UNISTACK,现翻译一下Readme,工程/原文:https://github.com/aumc ...

  10. 打war包时无法把src/main/java里的xml文件打包上去

    maven打包默认打src/mian/resource里面的xml,而不会去src/main/java,所以 再pom.xml里的bulid节点里加上 <resources> <re ...