最近用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传参,后端无法获取参数问题的更多相关文章

  1. axios的post传参时,将参数转为form表单格式

    import axios from 'axios'; import alert from './alert.js'; import Qs from 'qs' //引入qs 时axios的自带模块 le ...

  2. C# WebApi 根据实体类检查传参或字典检查参数

    根据实体类或字典检查传参,是否缺少参数并返回缺少参数 值类型必须声明可空 /// <summary> /// 根据 Dictionary<string, string> 得到实 ...

  3. C/C++函数调用时传参过程与可变参数实现原理

    C/C++函数调用时传参过程与可变参数实现原理 C语言的经典swap问题 在学习C语言的时候,我们大都遇到过一些经典例题,这些经典例题背后所代表的是往往是C/C++背后的一些运行原理,比如下面这个示例 ...

  4. Vue路由传参及传参后刷新导致参数消失处理

    项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那 ...

  5. mixin 在传参中可以出现 参数 在类内部可以定义 作用域

    mixin 在传参中可以出现 参数  在类内部可以定义

  6. mock和axios常见的传参方式

    第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两 ...

  7. axios中post传参方式

    最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414 ...

  8. vue 路由传参中刷新页面参数丢失 及传参的几种方式?

    在页面跳转中,我通过路由传参,结果发现页面参数丢失了.路径返回了根目录.... 1. 先说下路由传参的几种方式吧? 比如:<div v-for="item in items" ...

  9. 前端上传文件 后端PHP获取文件

    <body> <form action="03-post-file.php" method="post" enctype="mult ...

随机推荐

  1. 谈谈IC、ASIC、SoC、MPU、MCU、CPU、GPU、DSP、FPGA、CPLD

    IC (integrated circuit) 集成电路:微电路.微芯片.芯片:集成电路又分成:模拟集成电路(线性电路).数字集成电路.数/模混合集成电路: 模拟集成电路:产生.放大.处理各种模拟信号 ...

  2. mapper的配置文件

    <?xml version="1.0" encoding="UTF-8" ?><!DOCTYPE mapperPUBLIC "-// ...

  3. Vue____实现本地代码推送到云端仓库的相关操作

    项目初始化搭建完毕,每进行一个功能模块开发的必备操作,目的是方便协同开发以及备份代码 一.每开发一个新功能,都应该创建一个新分枝,待该功能模块开发完成以后,再合并到主分支master中,具体步骤如下: ...

  4. 经典问题(c++/python)素数、杨辉三角(金字塔型)、统计单词数、简单计算器、密码安全程度、凯撒密码加密、汉诺塔 (python课设实验实例)-- biaobiao88

    [编写程序,输人一个大于2的自然数,然后输出小于该数字的所有素数组成的列表.]所谓素数,是指除了1和自身之外没有其他因数的自然数,最小的素数是2,后面依次是3.5.7.11.13... c++代码: ...

  5. Pycharm学生版安装教程(2019-12月更新)

    以下方法全部是官方渠道正版激活,可选择学生版(免费) 或企业版(付费) 我的机器学习教程「美团」算法工程师带你入门机器学习  以及 「三分钟系列」数据结构与算法  已经开始更新了,欢迎大家订阅~这篇专 ...

  6. Linux 安装 Nvidia 驱动出现的黑屏各种问题和解决方式

    之前因为想OBS支持h264-nvenc这个功能然后就编译ffmpeg,然后使用Github上面的一个编译项目),项目编译完成之后重启电脑,然后就进入不了系统的登录页面了,选择进入Linux系统之后就 ...

  7. cocos2dx Vec2

    //SE是坐标重叠部分 // returns true if segment A-B intersects with segment C-D. S->E is the overlap part ...

  8. VC++取MD5算法记录下以后用得到(转)

    这个是网上扒下来的 作者已经无法知道是谁了 MD5.h #ifndef MD5_H #define MD5_H #include <string> #include <fstream ...

  9. 洛谷$P2469\ [SDOI2010]$ 星际竞速 网络流

    正解:网络流 解题报告: 传送门$QwQ$ 题目好长昂,,,大概概括下就说有$m$条单向边,$n$个点,每条边有一条边权,每个点有一个点权,然后问每个点都要到达一遍的最小代价是多少$QwQ$? 发现有 ...

  10. apache相关实验-1

    一.目录别名实验 当 apache 接受请求时,在默认情况下会将 DocumentRoot 目录中的文件送到客户端,如果想将某一不在 DocumentRoot 目录中的文件共享到网站上,并希望将它们留 ...