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);

原文地址:https://www.cnblogs.com/zhoulixiangblog/p/12251639.html

时间: 2024-11-10 13:31:26

axios用post传参,后端无法获取参数问题的相关文章

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

import axios from 'axios'; import alert from './alert.js'; import Qs from 'qs' //引入qs 时axios的自带模块 let env = process.env.NODE_ENV; let root = ''; if (env === 'development') { console.log("api"); } else if (env === 'production') { console.log(&quo

Date对象,封闭空间,函数传参和封装,获取非行间样式,字符串操作

一.Date对象 1. 获取 oDate.getFullYear() 获取年份 oDate.getMonth()+1  获取月份( 0-11)----->1-12 oDate.getDate()  获取日 1-31 oDate.getHours() 获取小时 oDate.getMinutes() 获取分 oDate.getSeconds() 获取秒 oDate.getMilliseconds();   //毫秒 oDate.getDay() 获取星期几 0-6     0:星期天 例:数码时钟

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

参考:https://blog.csdn.net/qq_43103581/article/details/82260073(vue 路由传递参数,刷新页面后参数丢失) 项目功能需要,要从列表页跳转到第三方提供的URL上(这里第三方页面我是通过iframe引入在详情页,目的是点击返回时可以通过keepAlive让列表页不刷新,如果不通过iframe直接跳第三方链接,那么返回必然会重新拉取数据),一路百度,刚开始使用 this.$router.push({name:'list', params:{i

PHP_零基础学php_3PHP函数、传参函数、默认参数、函数返回值

<?php function say_hello() //无参数 { $name="tang"; echo "hello,".$name; echo "<br />"; echo "<hr />"; } say_hello();//函数调用 function say_helloS($some_name)//有参数 { echo "hello,".$some_name; echo

mock和axios常见的传参方式

第一次接手项目,传参方式还有些吃力,因此做一下总结. 首先我们需要会看swagger中的接口.里面写了某个接口需要接收什么样的值,前端怎么传递这个值 在mock中的传参方式: mock中传参的方式有两个参数,一个是path对象,一个是data对象. path想当于拼接在url地址上的参数, data是url后面的参数. 1.get请求 如果url后面有opts的参数,则说明他需要传递参数.要不就不用传递了,直接写个url就好了,不用拼接参数.(请看下图) 图一是接口 图二是调用了这个接口. 这个

axios中post传参方式

最近做vue项目,做图片上传的功能,使用get给后台发送数据,后台能收到,使用post给后台发送图片信息的时候,vue axios post请求发送图片base64编码给后台报错HTTP 错误 414请求一直报错,显示 request URI too large后台显示一直没有收到数据 参数为null.网上查看了很多资料,才知道axios post传参的问题. this.$axios({ method: 'post', url:url, params: { is_iso:1, goods_id:

vue.js - axios Get方法传参给 .net core webapi。

1:在vue项目中通过params属性携带数据: let _self = this; axios({ method:'get', url:'http://localhost:5000/api/StuInFors/GetEFAsync/', params:{pagesize:10,pageindex:2} }).then(function(resp){ //document.write(JSON.stringify(resp.data)); console.log(resp.status); _s

jsp中 url传参到后台的参数获取

datagrid传值url方法1:<input type="hidden" id="sortid"> <table id="dg" class="easyui-datagrid" title="标题" data-options="iconCls: 'icon-save',singleSelect: false,sortOrder:'desc',toolbar: '#tb',idF

函数传参时,默认参数为变量容易出现的问题

在定义函数时使用默认参数的时候,如果默认参数是变量的话,需要注意一下坑. 1 # This Python file uses the following encoding: utf-8 2 3 def add_end(l = []): 4 l.append('end') 5 print(id(l), l) 6 7 if __name__ == '__main__': 8 add_end() 9 add_end() 10 11 输出: 12 2510338155080 ['end'] 13 251