详解解决使用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 相关文章推荐
简介AngularJS的HTML DOM支持情况
Jun 17 Javascript
jQuery插件实现静态HTML验证码校验
Nov 06 Javascript
微信小程序 实战小程序实例
Oct 08 Javascript
前端JS面试中常见的算法问题总结
Dec 23 Javascript
jQuery实现简单漂亮的Nav导航菜单效果
Mar 29 jQuery
微信小程序实战之自定义抽屉菜单(7)
Apr 18 Javascript
使用async await 封装 axios的方法
Jul 09 Javascript
JS的Ajax与后端交互数据的实例
Aug 08 Javascript
浅谈JS的原型和继承
May 08 Javascript
你或许不知道的一些npm实用技巧
Jul 04 Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 Javascript
Js实现复选框的全选、全不选反选功能代码实例
Feb 28 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
php XPath对XML文件查找及修改实现代码
2011/07/27 PHP
php操作access数据库的方法详解
2017/02/22 PHP
yii框架无限极分类的实现方法
2017/04/08 PHP
PHP调用微博接口实现微博登录的方法示例
2018/09/22 PHP
使用JavaScript动态设置样式实现代码(2)
2013/01/25 Javascript
加载远程图片时,经常因为缓存而得不到更新的解决方法(分享)
2013/06/26 Javascript
写出高效jquery代码的19条指南
2014/03/19 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
jQuery实现动画效果circle实例
2015/08/06 Javascript
JavaScript实现ASC转汉字及汉字转ASC的方法
2016/01/23 Javascript
Angularjs2不同组件间的通信实例代码
2017/05/06 Javascript
js实现图片轮播效果学习笔记
2017/07/26 Javascript
echarts同一页面中四个图表切换的js数据交互方法示例
2018/07/03 Javascript
原生js实现针对Dom节点的CRUD操作示例
2019/08/26 Javascript
[36:52]DOTA2真视界:基辅特锦赛总决赛
2017/05/21 DOTA
[01:14:12]2018DOTA2亚洲邀请赛4.7 总决赛 LGD vs Mineski 第二场
2018/04/09 DOTA
Django自定义分页效果
2017/06/27 Python
详细分析python3的reduce函数
2017/12/05 Python
Python模块文件结构代码详解
2018/02/03 Python
Python带动态参数功能的sqlite工具类
2018/05/26 Python
Python基于pyCUDA实现GPU加速并行计算功能入门教程
2018/06/19 Python
Flask Web开发入门之文件上传(八)
2018/08/17 Python
在Django中URL正则表达式匹配的方法
2018/12/20 Python
Python3 SSH远程连接服务器的方法示例
2018/12/29 Python
python 控制Asterisk AMI接口外呼电话的例子
2019/08/08 Python
如何基于python生成list的所有的子集
2019/11/11 Python
Python异常继承关系和自定义异常实现代码实例
2020/02/20 Python
python编程进阶之异常处理用法实例分析
2020/02/21 Python
德国PC硬件网站:CASEKING
2016/10/20 全球购物
入党思想汇报
2014/01/05 职场文书
群众路线查摆问题及整改措施
2014/10/10 职场文书
财务工作失职检讨书
2014/11/21 职场文书
2015年幼儿园班主任个人工作总结
2015/10/22 职场文书
多属性、多分类MySQL模式设计
2021/04/05 MySQL
Python爬虫实战之爬取携程评论
2021/06/02 Python
Python字典的基础操作
2021/11/01 Python