解决Vue axios post请求,后台获取不到数据的问题方法

最近做项目，需要用到vue,后台是php,第一次使用axios进行请求，本以为同ajax一样，会很简单，但是结果往往不让人满意啊，get请求很简单，这里就不说了，主要说下 post请求方式。

使用axios进行post请求，后台居然接收不到数据，这就纳闷了，于是网上一顿搜索，现在将所用的解决办法给大家说下：

1.new URLSearchParams方式

起初使用params.append("属性名"：属性值)的方式，对于简单的数据传递这样是没有问题的，后台可以正常接收数据，但我发现一个问题，不知道大家有没有遇到过，当传递数据里含有数组时，你会发现传到后台的是字符串的形式 arr:a1,b1,c1 而非正常格式 arr:[a1,b1,c1]不符合我的要求，继续查找。

2.Qs.stringify方式

看到网上好多解决办法都在说qs,于是装了qs插件，使用方法也很简单。首先安装插件，然后注册组件，axios.post(url,Qs.stringify(params)),在传递参数前，用qs转换下格式就可以了，Qs是将对象 序列化成URL的形式，以&进行拼接,在后台输出下接收的数据，嘿有值了，别提有多高兴了，刚乐呵没二分钟，等会再认真看看，这才发现当数据为空时qs居然给过滤掉了，直接没传，这叫一个伤心。。。

3.改变后台接收方式

网上的帖子大部分都是在前端处理，但没什么太好的解决办法，于是把思路转到后台，改变后台的接收方式，最终使用file_get_contents('php://input')解决。

以上这篇解决Vue axios post请求,后台获取不到数据的问题方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决vue处理axios post请求传参的问题

    很多朋友在使用vue的过程中肯定会用到axios 请求,包括现在vux中已经自带了axios,而且用法也很简单,文档中写的比较清楚,但是当我们使用post提交时,却发现有时候会出现参数没有发送到服务器的问题,我记得文档中也说了这一情况的出现,在这里我把这设置情况记录下来,方便下次需要的时候直接使用.不需要翻阅旧代码了. 下面是vux中的使用方式,很简单,把代码放置在main.js中就可以了.如果仅仅使用了vue的话,直接安装了axios的话,设置方式也雷同,就不记录了. import qs fr

  • 解决axios post 后端无法接收数据的问题

    在后端 允许跨域的情况下,axios post 将数据传到后端,但是后端无法接收,始终为空 请求能正常到达后端,那么肯定传数据的地方的问题了 所以这里headers设置为 headers:{"Content-Type":'application/x-www-form-urlencoded;charset=UTF-8'} 另外transformRequest函数 transformRequest: [function (data) { // 对 data 进行任意转换处理 let ret

  • 解决Vue axios post请求,后台获取不到数据的问题方法

    最近做项目,需要用到vue,后台是php,第一次使用axios进行请求,本以为同ajax一样,会很简单,但是结果往往不让人满意啊,get请求很简单,这里就不说了,主要说下 post请求方式. 使用axios进行post请求,后台居然接收不到数据,这就纳闷了,于是网上一顿搜索,现在将所用的解决办法给大家说下: 1.new URLSearchParams方式 起初使用params.append("属性名":属性值)的方式,对于简单的数据传递这样是没有问题的,后台可以正常接收数据,但我发现一

  • vue操作下拉选择器获取选择的数据的id方法

    实际项目中我们获取选择的数据的id:这时候 需要配合使用v-bind,才能获取到选择的那条数据的id值,其实就是id赋值给value属性 <template> <div> <select v-model="select" > <option v-for="(a,index) in arr" :key="index" :value="a.id">{{ a.name }}</o

  • 解决vue axios跨域 Request Method: OPTIONS问题(预检请求)

    我们在vue开发中用axios进行跨域请求时有时会遇到,同一个接口请求了两次,并且第一次都是options请求,然后才是post/get请求 如下图 options请求 get请求 为什么会出现这种原因呢? 这是因为CORS跨域分为 简单跨域请求和复杂跨域请求: 简单跨域不会发送options请求,复杂跨域会发送一个预检请求options. 1.简单跨域满足的条件 1.请求方式是以下三种之一: HEAD GET POST 2.HTTP的头信息不超出以下几种字段 Accept Accept-Lan

  • 解决vue axios的封装 请求状态的错误提示问题

    如下所示: /** * axios配置,输出为vue组建 * */ import axios from 'axios'; import qs from 'qs' import CookiesJS from 'js-cookie' import router from '../router' // http request 拦截器 axios.interceptors.request.use( config => { config.headers = { 'Content-Type': 'appl

  • 利用SpringMVC过滤器解决vue跨域请求的问题

    之前写过通过注释的方法解决跨域请求的方法,需要每次都在controll类使用注解,这次通过springmvc的拦截器解决: 继承SpringMVC的类HandlerInterceptor重写preHandle方法,这个方法会在到达 controll之前调用,如下 public boolean preHandle(HttpServletRequest request, HttpServletResponse response, Object handler) throws Exception {

  • vue axios登录请求拦截器

    当我们在做接口请求时,比如判断登录超时时候,通常是接口返回一个特定的错误码,那如果我们每个接口都去判断一个耗时耗力,这个时候我们可以用拦截器去进行统一的http请求拦截. 1.安装配置axios cnpm install --save axios  我们可以建一个js文件来做这个统一的处理,新建一个axios.js,如下 import axios from 'axios' import { Indicator } from 'mint-ui'; import { Toast } from 'mi

  • vue axios同步请求解决方案

    vue axios同步请求解决方案

    在vue项目里面,需要循环发送ajax请求,出现的问题就是循环结束,第一次服务器还没返回,导致数据处理错误,需要使用同步请求 解决方案 目前没有发现axios可以同步请求,所以只能使用jQuery,配置同步请求: $.ajax({ url:'/comm/test1.php', type:'POST', //GET async:false, //或false,是否异步 data:{ name:'yang',age:25 }, timeout:5000, //超时时间 dataType:'json'

  • 解决vue组件props传值对象获取不到的问题

    先说问题,父组件利用props向子组件传值,浏览器 console 有这个值,但是获取不到内部的属性,困了我3个小时,真的** personal console 以下为原代码 1.home.vue(父组件)--personal是被传的参数 <!--子组件--> <form-picker class="form-picker" :personal="personal" > </form-picker> export default

  • Vue+axios封装请求实现前后端分离

    本文实例为大家分享了Vue+axios封装请求实现前后端分离的具体代码,供大家参考,具体内容如下 前言 我们需要进行前后端分离开发,那么前后端的跨域问题就是无可避免的问题,前后端的请求也是无可避免的,Vue之中有一个请求组件是axios,我们可以对axios进行封装作为我们请求的工具组件 # 一.封装axios vue.config.js 配置文件 module.exports = { configureWebpack: { resolve: { alias: { api: '@/api', a

  • vue axios接口请求封装方式

    目录 vue axios接口请求封装 总结 vue axios接口请求封装 简易记录一下最近用到的比较顺手的.axios接口请求的封装 1.新建network文件夹,其内新建request.js 设置一个 baseURL ,便于为axios实例传递相对url 2.新建api文件夹,其内新建index.js.home.js index.js主要是为了便于导出可能有多个页面相关的请求 home.js中主要封装有关home页的请求操作,这里名字随便取即可 3.在main.js中导入/api/index

随机推荐