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. react-router-dom

    创建: 2019/05/18  安装 npm install react-router-dom --save    

  2. 18.使用for循环计算+1-3+5-7+9-11+13...99的结果

    j = 1 # -1 num1 = 0 #1-3 for i in range(1,100,2): num1 += j * i # -3 j = j * -1 # 1 print(num1) sum1 ...

  3. HTML5元素拖放设置总结

    将元素图片放入div盒子内 1.首先设置元素为可拖放:在img标签内加入draggable=”true”. <img draggable="true"> 2.设置元素的 ...

  4. IOS在滚动的时候fixed消失

      前段时间,除了apple发布了新的硬件之外,同步还发布了新的操作系统,IOS11,当大家都将注意力聚焦在那个奇怪的刘海该如何适配的时候,笔者的项目在适配IOS11却出现了其他的问题. 众所周知,I ...

  5. 10.使用子查询 ---SQL

    利用子查询进行过滤 普通查询: SELECT order_num FROM OrderItems WHERE prod_id = 'RGAN01'; 输出▼ order_num ----------- ...

  6. Python中输出字体的颜色设置

    1.实现过程 终端的字符颜色是用转义序列控制的,是文本模式下的系统显示功能,和具体的语言无关.控制字符颜色的转义序列是以ESC开头,即用\033来完成 2.书写过程 开头部分: \033[显示方式;前 ...

  7. Sam's Numbers 矩阵快速幂优化dp

    https://www.hackerrank.com/contests/hourrank-21/challenges/sams-numbers 设dp[s][i]表示产生的总和是s的时候,结尾符是i的 ...

  8. h5点击区域和实际区域对不上

    点击区域和实际区域对不上 然后点击后触发的其实是上面的区域,会导致事件触发错误

  9. 将SpringBoot默认使用的tomcat替换为undertow

    随着微服务的兴起,越来越多的互联网应用在选择web容器时使用更加轻量的undertow或者jetty.SpringBoot默认使用的容器是tomcat,如果想换成undertow容器,只需修改pom. ...

  10. Java基础语法(数组)

    第4天 Java基础语法 今日内容介绍 u 流程控制语句(switch) u 数组 第1章 流程控制语句 1.1 选择结构switch switch 条件语句也是一种很常用的选择语句,它和if条件语句 ...