最近用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. sklearn各种分类器简单使用

    sklearn中有很多经典分类器,使用非常简单:1.导入数据 2.导入模型 3.fit--->predict 下面的示例为在iris数据集上用各种分类器进行分类: #用各种方式在iris数据集上 ...

  2. 异步加载css 和 谷歌浏览器各实用小工具介绍

    异步加载css资源 加开页面首屏显示速度使我们前端一直在追求的目标,而css资源在这些优化中同样也是不可或缺的. 一个网站可能有一部分css资源是必须的,他需要在页面渲染完之前就被加载完,并和html ...

  3. Excel基本功能

    公式基础: 比较运算符的种类 flase对应0 而ture对应1 连接运算 利用之前提到的ture就是1 乘以100 注意用括号区分优先级 函数应用基础: 系统已经列好这几个常用的函数 右键单击状态栏 ...

  4. springboot 文件上传及java使用post请求模拟文件上传

    参考自:https://blog.csdn.net/qq_25958999/article/details/83988974 接收端Controller类中方法: @RequestMapping(va ...

  5. 机器学习之路--Matplotlib

    1.绘制折线图 在pandas里面有一种数据类型为datatime ,可以将不规范的日期改为:xxxx-xx-xx import pandas as pd import numpy as np a = ...

  6. 并发编程的基石——CAS机制

    本博客系列是学习并发编程过程中的记录总结.由于文章比较多,写的时间也比较散,所以我整理了个目录贴(传送门),方便查阅. 并发编程系列博客传送门 Java中提供了很多原子操作类来保证共享变量操作的原子性 ...

  7. 《图解机器学习-杉山将著》读书笔记---CH5

    CH5 稀疏学习 重点提炼 提出稀疏学习的缘故: 虽然带有约束条件的最小二乘学习法结合交叉验证法,在实际应用中是非常有效的回归方法,但是,当参数特别多时,计算参数以及预测值需要大量时间.此时,我们要解 ...

  8. deepin idea2019注册码

    找了好久终于找到能用的注册码了https://blog.csdn.net/zixiao217/article/details/82942476第一个好像是已经过期了,然后试了下第二个发现可以直接官网下 ...

  9. 自定义实现的ArrayList以及自定义实现的Iterator迭代器

    ArrayList的底层是长度可动态变化的数组,其适用于查找多,修改少的情况,原因是数组的元素的增加删除元素会涉及大量元素的移动,效率比较低,ArrayList中的元素可以重复,与插入时的顺序相同,可 ...

  10. vue报错 [Intervention] Ignored attempt to cancel a touchmove event with cancelable

    在vue开发中使用vue-awesome-swiper制作轮播图,手动拖动时会报错,解决方案: 需要滑动的标签 { touch-action: none; } -------------------- ...