最近用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. geoip ip2region2 with spark

    上一篇文章中 我使用 maxmind的免费库开发了一个waterdrop的 插件,测试数据发现,国内的有些市级还是不准确,而且香港并不是显示中国,这就不友好了. 找了一下,发下 ip2region 这 ...

  2. 如何抢占云栖大会C位?史上最强强强攻略来了

    本文作者:阿里云头条 原文链接 本文为云栖社区原创内容,未经允许不得转载.

  3. PRML第一章读书小结

    PRML第一章读书小结     第一章用例子出发,较为简单的引入了概率论.模型.决策.损失.信息论的问题,作为机器学习从业者,读PRML除了巩固已有基础,还受到了很多新的启发,下面将我收到的启发总结如 ...

  4. vue-router学习之二

    本文的学习来自技术胖大神的教程:https://jspang.com/ 这里的路由是指SPA(单页应用)的路径管理器.vue-router就是WebApp的链接路径管理系统. 为什么不能直接用< ...

  5. 【游记】THUWC2019-2 Bystander

    [游记]THUWC2019-2 Bystander Day0/-1 感觉自己怎么样都去不了PKUWC(没错)了,差点放弃模拟面试,在老妈的要求下勉强面试,自我介绍没怎么准备,然后就说 我喜欢唱跳Rap ...

  6. js动态改变下拉框内容

    今天为大家分享一篇js动态设置select下拉菜单的默认选中项实例,具有很好的参考价值,希望对大家有所帮助. 代码实例如下: <!DOCTYPE html> <html lang=& ...

  7. Mysql 性能优化Explain详解

    explain 功能我们在日常使用中,使用慢查询找到执行时间比较久的查询,然后使用SHOW STATUS.SHOW PROFILE.和explain做单条语句的分析.使用explain关键字可以模拟优 ...

  8. ArcGIS for JavaScript 开发智能提示

    开发如果没有智能提示,可想而知是一件多举痛苦的事情,好在Esri为Visual Studio 2010.Aptana3提供了一个插件,这样就使我们在使用ArcGIS API for Javascrip ...

  9. php5升php7代码修改整理

    1. 为什么升级至php7 a.安全需要 过早以至于不维护的php版本难免会有未修补的漏洞,安全性要求较高的行业是要及时升级的. b.性能提升(开启opcache hugepage) 据说性能提升一倍 ...

  10. android:整理drawable(shapdrawable)(二)

    前言 bitmapdrawable 与nithpathdrawable 完结,接下来是shapedrawable. shapedrawable是使用频率最高的drawable 可见其重要性. shap ...