axios用post传参,后端无法获取参数问题
最近用vue+nodejs写项目,前端使用axios向后台传参,发现后台接收不到参数。
后台是node+express框架,然后使用了body-parser包接收参数,配置如下:
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.listen(8888, () => {
console.log('Server start on 8888...')
})
app.use(bodyParser.urlencoded({extended: true})
axios传参,官方给了两种方式。
方式一
axios.post('/user', {
firstName: 'Fred',
lastName: 'Flintstone'
})
.then(function (response) {
console.log(response);
})
.catch(function (error) {
console.log(error);
});
方式二
axios({
method: 'post',
url: '/user/12345',
data: {
firstName: 'Fred',
lastName: 'Flintstone'
}
});
以上两种方案我都试过,后台都无法获取到参数。
网上有不少解决方案说axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
或者 {headers:{'Content-Type':'application/x-www-form-urlencoded'}}
我也都试过,还是不行。
直到我看了一下axios的源码,想起了axios自动转换json数据的特性:
所以以上两种传参方式,和后台app.use(bodyParser.urlencoded({extended: true})的配置不适用,解决方式如下两种:
解决方案一
前端传参方式不变,后台修改bodyParser的接收参数方式:
const express = require('express')
const bodyParser = require('body-parser')
const app = express()
app.listen(8888, () => {
console.log('Server start on 8888...')
})
app.use(bodyParser.json())
解决方案二
后台不用变,前端改变传参方式如下:
const params = new URLSearchParams();
params.append('firstName', 'Fred');
params.append('lastName', 'Flintstone');
axios.post('/user/12345', params);
axios用post传参,后端无法获取参数问题的更多相关文章
- axios的post传参时,将参数转为form表单格式
import axios from 'axios'; import alert from './alert.js'; import Qs from 'qs' //引入qs 时axios的自带模块 le ...
- C# WebApi 根据实体类检查传参或字典检查参数
根据实体类或字典检查传参,是否缺少参数并返回缺少参数 值类型必须声明可空 /// <summary> /// 根据 Dictionary<string, string> 得到实 ...
- C/C++函数调用时传参过程与可变参数实现原理
C/C++函数调用时传参过程与可变参数实现原理 C语言的经典swap问题 在学习C语言的时候,我们大都遇到过一些经典例题,这些经典例题背后所代表的是往往是C/C++背后的一些运行原理,比如下面这个示例 ...
- Vue路由传参及传参后刷新导致参数消失处理
项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...
- mixin 在传参中可以出现 参数 在类内部可以定义 作用域
mixin 在传参中可以出现 参数 在类内部可以定义
- mock和axios常见的传参方式
第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两 ...
- axios中post传参方式
最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414 ...
- vue 路由传参中刷新页面参数丢失 及传参的几种方式?
在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...
- 前端上传文件 后端PHP获取文件
<body> <form action="03-post-file.php" method="post" enctype="mult ...
随机推荐
- Wanafly 挑战赛 14 E 无效位置 (线性基+并查集)
Wanafly 挑战赛 14 E 无效位置 (线性基+并查集) 传送门:https://ac.nowcoder.com/acm/contest/81/#question 题意: n个数,m次操作 一个 ...
- Python 多组输入
#基于Python2.7 #若是想Python做到和C++中while(scanf()!=EOF)一样的多组输入效果,可以如实例所示书写 #实例实现了多组输入,计算A+B+C并输出的任务 while ...
- python常见关键字的使用
常见关键字 在循环中常见的关键字使用方法 continue:结束本次循环,继续执行下一次循环 break:跳出一个循环或者结束一个循环 例 使用用户名密码登录(有三次机会)count=0while c ...
- 0002 认识HTML(骨架、DOCTYPE、lang、charset)
学习目标 理解 1.HTML的概念 2.HTML标签的分类 3.HTML标签的关系 4.HTML标签的语义化 应用 1.HTML骨架格式 2.sublime基本使用 1. HTML 初识 HTML 指 ...
- iptables匹配端口范围,映射,网络状态
####匹配端口范围:iptables -I INPUT -p tcp -m multiport --dport 21,22,23,24 -j ACCEPT <==次选iptables -I I ...
- cookies 与session
cookies :存放在浏览器(客户端)的用户信息 - 优点: 可以将数据存在客户端一方: - 缺点: 不安全,可以存放多份,导致服务端占用空间过大 session :存放在服务端的用户信息 - 优点 ...
- Mybatis 学习过程中出现空指针异常的错误【已解决】
Mybatis 学习过程中出现空指针异常的错误[已解决] 以下是写的小测试的代码 bean层 Player类(篮球队队员) bean层 Team类(篮球队) dao层 TeamDao.xml配置文件 ...
- linux installer os的驱动更新
installer os的驱动更新 linux系统可以简单的分为installer OS与运行时的OS,安装阶段识别不到硬件设备大概率因为installers OS版本较低,没有驱动来识别新的硬件,可 ...
- 解决阿里云ECS下kubeadm部署k8s无法指定公网IP
背景 一般情况下,"kubeadm"部署集群时指定"--apiserver-advertise-address=<public_ip>"参数,即可在 ...
- Java开发中的各种乱码问题
乱码问题 其实解决乱码问题,就是保证所有的编码格式一致,就不会出现问题. 控制台乱码 修改idea的控制台格式 修改 idea.exe.vmoptions和idea64.exe.vmoptions 在 ...