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 ...
随机推荐
- php二维数组转成一维数组
$arr是需要转换的数组集合 array_reduce($arr, 'array_merge', array());
- boostrap-非常好用但是容易让人忽略的地方【3】:clearfix
代码 显示结果 代码 结果
- TCP/IP||ARP/RARP
1.ARP ARP(地址解析协议)主要为IP地址到对应的硬件提供动态映射,过程是自动完成 在网络接口有一个硬件地址(48 bit),在硬件层次上的数据帧交换必须有正确的接口地址,但是32 bit 的I ...
- DEVOPS技术实践_23:判断文件下载成功作为执行条件
在实际生产中,我们经常会需要通过判断一个结果作为一个条件去执行另一个内容,比如判断一个文件是否存在,判官一个命令是否执行成功等等 现在我们选择其中一个场景进行实验,当某个目录下存在,则执行操作 1. ...
- $NOIp$做题记录
虽然去年做了挺多了也写了篇一句话题解了但一年过去也忘得差不多了$kk$ 所以重新来整理下$kk$ $2018(4/6$ [X]积木大赛 大概讲下$O(n)$的数学方法. 我是从分治类比来的$QwQ$. ...
- 「P5004」专心OI - 跳房子 解题报告
题面 把\(N\)个无色格子排成一行,选若干个格子染成黑色,要求每个黑色格子之间至少间隔\(M\)个格子,求方案数 思路: 矩阵加速 根据题面,这一题似乎可以用递推 设第\(i\)个格子的编号为\(i ...
- Win10该文件没有与之关联的应用来执行该操作...请在"默认应用设置"页面中创建关联
问题发现:一直使用的一款软件--火柴,这两天忽然发现通过ctrl + 回车快捷键无法进入到文件所在的目录中(之前几天印象中还可以使用该功能).后来测试又发现无法打开网易云音乐中下载的音乐而进入到该音乐 ...
- 【5min+】你怎么穿着品如的衣服?IEnumerable AND IEnumerator
系列介绍 简介 [五分钟的dotnet]是一个利用您的碎片化时间来学习和丰富.net知识的博文系列.它所包含了.net体系中可能会涉及到的方方面面,比如C#的小细节,AspnetCore,微服务中的. ...
- css部分概念
1.层叠 规则之间属性相同,值不同的时候就会发生声明冲突,这个时候层叠就会起作用了,层叠会将我们声明的不同的值进行保留,相同的值进行比较,选权重值更高的一个来运行.具体情境如下:假设我们定义了一个di ...
- 【Java基础总结】总结
总想着把学习的过程全都记录下来 以便某一时刻回头的时候,还能看见走过的路 对于基础来说,即使不回头看,也知道这条路是什么样子的 记录不记录,都无所谓 况且我不是专业的记录者,不记录比记录好 实在想不起 ...