详解解决使用axios发送json后台接收不到的问题


Posted in Javascript onJune 27, 2018

问题描述

按照axios官网例子发起请求传递json,后台接受到的数据为空,一直卡在options阶段。

尝试的方法

开始以为是接口有问题,使用postman测试下,一切正常,百思不得其解,看了好多issue也解决不了,加了headers:{'content-type':'application/json'}也没用。

官网上是说,传json就按application/json进行处理,然而并没有卵用;之后套了一层JSON.stringify(data)content-type又变成表单格式了==。

然后翻自己之前的代码,发现写法如出一辙,怀疑是版本号的问题,然而并不是==。。。。考虑到可能和服务端有关系。

原代码如下:

import axios from 'axios';

export default function request(url, params) {
  return axios.post(`xxxxxx/${url}`, params)
    .then((response) => {
      console.log('response', response);
      return response;
    })
    .catch((error) => {
      console.log('error', error);
      return error;
    });
}

最后想想还是用fetch吧(确实用了,发现还是有这个问题,现在深度怀疑是服务端将参数类型卡的太死了,还有polyfill的问题就放弃了,如果有知道的小伙伴请留言告诉我,谢谢),实在不行就ajax(还要封装成promise,哭)。出于对axios的坚持,终于找到了解决方法。

解决方法

就是添加qs库,将json序列化之后传递,详见这个issue。

代码:

import axios from 'axios';
import qs from 'qs';

export default function request(url, params) {
  return axios.post(`https://xxxxxxxx/${url}`, qs.stringify(params))
    .then((response) => {
      console.log('response', response);
      return response;
    })
    .catch((error) => {
      console.log('error', error);
      return error;
    });
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery学习笔记之jQuery原型属性和方法
Jun 09 Javascript
排序算法的javascript实现与讲解(99js手记)
Sep 28 Javascript
jQuery实现简单的文件上传进度条效果
Mar 26 Javascript
详解AngularJS过滤器的使用
Mar 11 Javascript
JS中如何比较两个Json对象是否相等实例代码
Jul 13 Javascript
jQuery实现的多张图无缝滚动效果【测试可用】
Sep 12 Javascript
jQuery插件FusionWidgets实现的AngularGauge图效果示例【附demo源码】
Mar 23 jQuery
three.js中文文档学习之创建场景
Nov 20 Javascript
Vue2.X 通过AJAX动态更新数据
Jul 17 Javascript
Vue.js 利用v-for中的index值实现隔行变色
Aug 01 Javascript
微信小程序转发事件实现解析
Oct 22 Javascript
vuex actions异步修改状态的实例详解
Nov 06 Javascript
vue中v-model的应用及使用详解
Jun 27 #Javascript
JS基于封装函数实现的表格分页完整示例
Jun 26 #Javascript
Vue实现todolist删除功能
Jun 26 #Javascript
AngularJS实现动态切换样式的方法分析
Jun 26 #Javascript
详解VUE自定义组件中用.sync修饰符与v-model的区别
Jun 26 #Javascript
jQuery实现ajax回调函数带入参数的方法示例
Jun 26 #jQuery
在vue中使用公共过滤器filter的方法
Jun 26 #Javascript
You might like
phpmyadmin 3.4 空密码登录的实现方法
2010/05/29 PHP
PHP中if和or运行效率对比
2014/12/12 PHP
PHP学习笔记(二):变量详解
2015/04/17 PHP
PHP如何将log信息写入服务器中的log文件
2015/07/29 PHP
PHP自定义函数实现assign()数组分配到模板及extract()变量分配到模板功能示例
2018/05/23 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
javascript 全选与全取消功能的实现代码
2012/12/23 Javascript
jQuery查询数据返回object和字符串影响原因是什么
2013/08/09 Javascript
javascript读写json示例
2014/04/11 Javascript
JS中完美兼容各大浏览器的scrolltop方法
2015/04/17 Javascript
浅谈关于JavaScript API设计的一些建议和准则
2015/06/24 Javascript
jquery.mousewheel实现整屏翻屏效果
2015/08/30 Javascript
跟我学习javascript的this关键字
2020/05/28 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
探索Vue.js component内容实现
2016/11/03 Javascript
ES6中Generator与异步操作实例分析
2017/03/31 Javascript
移动端web滚动分页的实现方法
2017/05/05 Javascript
jQuery实现拼图小游戏(实例讲解)
2017/07/24 jQuery
vue操作下拉选择器获取选择的数据的id方法
2018/08/24 Javascript
基于Vue 服务端Cookies删除的问题
2018/09/21 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
JavaScript 实现继承的几种方式
2021/02/19 Javascript
Python中threading模块join函数用法实例分析
2015/06/04 Python
python字符串编码识别模块chardet简单应用
2015/06/15 Python
python数据预处理之将类别数据转换为数值的方法
2017/07/05 Python
Python实现购物系统(示例讲解)
2017/09/13 Python
Django开发中复选框用法示例
2018/03/20 Python
python sqlite的Row对象操作示例
2019/09/11 Python
Python如何将函数值赋给变量
2020/04/28 Python
win10从零安装配置pytorch全过程图文详解
2020/05/08 Python
python怎么对数字进行过滤
2020/07/05 Python
与UNIX有关的几个名词
2015/09/17 面试题
小学德育工作经验交流材料
2014/05/22 职场文书
2016年党员公开承诺书格式范文
2016/03/24 职场文书
MySQL 可扩展设计的基本原则
2021/05/14 MySQL
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python