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

问题描述

按照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;
    });
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 解决axios发送post请求返回400状态码的问题

    今天在用 axios 发送一个跨域的post请求时,遇到了一个坑:Uncaught (in promise) Error: Request failed with status code 400. 前台代码如下: axios({ method: "post", url: "http://localhost:8080/employee/testpost", data: { username: '234234', password: '4565' } }).then((

  • 解决java使用axios.js的post请求后台时无法接收到入参的问题

    使用vue有一段时间了,下面是我在Java环境下使用vue+axios的时候遇到的一个坑,在这分享给大家,如有不正确或者疑惑的地方可以给我留言. 1.在使用异步请求后台时,由于官方不在更新vue-resource,推荐使用axios,因此在使用的时候难免会遇到各种问题.目前遇到最大的问题是在使用axios.post的请求向Java后端传入入参时,后端无法接收到参数.在这里主要处理移动端浏览器兼容的问题. 在这里我提供了两种解决办法: 一.URLSearchParams.append()方法 由于

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

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

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

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

  • 解决vue2中使用axios http请求出现的问题

    使用axios处理post请求时,出现的问题解决 默认情况下: axios.post(url, params).then(res => res.data); 当url是远程接口链接时,会报404的错误: Uncaught (in promise) Error: Request failed with status code 404 我们需要实例化一个新的axios,并且设置他的消息头为'content-type': 'application/x-www-form-urlencoded' 于是得出

  • axios发送post请求springMVC接收不到参数的解决方法

    axios发送post请求时,出现了参数后台接收不到的情况,分析了下请求,发现是请求头content-type不对,是application/json,正常应该是application/x-www-form-urlencoded. 解决方法有以下三种: 1.设置axios的默认请求头 //设置全局的 axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded'; var instance = a

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

    问题描述 按照axios官网例子发起请求传递json,后台接受到的数据为空,一直卡在options阶段. 尝试的方法 开始以为是接口有问题,使用postman测试下,一切正常,百思不得其解,看了好多issue也解决不了,加了headers:{'content-type':'application/json'}也没用. 官网上是说,传json就按application/json进行处理,然而并没有卵用:之后套了一层JSON.stringify(data) ,content-type又变成表单格式了

  • 详解Vue用axios发送post请求自动set cookie

    详解Vue用axios发送post请求自动set cookie

    vue-resource不再维护之后,我也用起了axios,但是死活无法设置服务器发送过来的cookie 后来查询文档发现,这个是要单独配置的. // `withCredentials` indicates whether or not cross-site Access-Control requests // should be made using credentials withCredentials: false, // default 当我们把此配置项设置成默认配置项并且设置成true

  • 详解Vue中Axios封装API接口的思路及方法

    一.axios的封装 在vue项目中,和后台交互获取数据这块,我们通常使用的是axios库,它是基于promise的http库,可运行在浏览器端和node.js中.他有很多优秀的特性,例如拦截请求和响应.取消请求.转换json.客户端防御XSRF等. 在一个项目中我们如果要使用很多接口的话,总不能在每个页面都写满了.get()或者.post()吧?所以我们就要自己手动封装一个全局的Axios网络模块,这样的话就既方便也会使代码量不那么冗余. 安装 > npm install axios //这个

  • springboot与vue详解实现短信发送流程

    springboot与vue详解实现短信发送流程

    目录 一.前期工作 1.开启邮箱服务 2.导入依赖 3.配置application.yaml文件 二.实现流程 1.导入数据库 2.后端实现 编写实体类 编写工具类ResultVo 编写dao层接口 配置dao层接口的数据库操作 编写service层接口 编写service层的实现方法 实现controller层 Test代码 前端页面的实现 运行截图+sql图 总结 一.前期工作 1.开启邮箱服务 开启邮箱的POP3/SMTP服务(这里以qq邮箱为例,网易等都是一样的) 2.导入依赖 在spr

  • 详解解决IDEA2020.1版本的lombok插件问题

    相信大家更新idea2020.1版本出现之后,发现很多插件无法使用的问题,比如常用的lombok插件无法使用,这里将提供解决方案 一. 官网插件地址 在idea插件中心找到lombok,右边会显示官网插件地址,点进去即可 二. 官网插件下载 2.1 右边选择安装到IDE,选择 2020.1版本 2.2 菜单切换到Versions,选择我们想要的版本 查看所有,找到EAP的版本 下载完成后要在IDEA进行本地安装覆盖历史的版本,就可以正常使用了 三. 安装本地插件 安装本地插件方法如下: 找 到下

  • 详解解决jupyter不能使用pytorch的问题

    详解解决jupyter不能使用pytorch的问题

    问题: 昨天在使用jupyter时,发现pytorch又不能用了,之前用了很久的时间安装上,最近一直在用pycharm,转而用jupyter时,发现又开始像之前一样报错,提示:no module named 'torch'. 尝试各种方法无果. 今天打开anaconda,无意想到,会不会是... 我为了美观把pytorch单独配置环境的原因呢? 难道jupyter只继承了base环境? 立即在base里装了torch,打开jupyter,可以运行了. 具体方法为: 1.打开anaconda,单击

  • Springboot详解RocketMQ实现消息发送与接收流程

    Springboot详解RocketMQ实现消息发送与接收流程

    springboot+rockermq 实现简单的消息发送与接收 普通消息的发送方式有3种:单向发送.同步发送和异步发送. 下面来介绍下 springboot+rockermq 整合实现 普通消息的发送与接收 创建Springboot项目,添加rockermq 依赖 <!--rocketMq依赖--> <dependency> <groupId>org.apache.rocketmq</groupId> <artifactId>rocketmq-

  • js前端传json后台接收‘‘被转为quot的问题解决

    一.产生原因 前端传json格式数据,后台接收却发现有一堆& quot;,但是如果后台接收参数用@RequestBody注解,则不会出现这个问题,出现这一问题的原因就是后台没有按照json格式去接收参数,按照json接收参数的前提是请求头 参数Content-Type:application/json,如此一来,后台框架才知道如何去处理参数,但有时候遇到的需求无法这么写,例如发送下载请求:         json格式参数最常见的是发送ajax请求,但是ajax无法触发浏览器下载机制,故不支持下

  • 详解vue中axios的使用与封装

    分享下我自己的axios封装 axios是个很好用的插件,都是一些params对象,所以很方便做一些统一处理 当然首先是npm安装axios 很简单$ npm install axios --save 在src下新建文件夹 service / index.js 接着上代码 import axios from 'axios'; import { Toast} from 'mint-ui';// 我用的mint的框架来弹出我的错误返回 大家可以用别的提示 import router from '..

随机推荐