Vue-axios-post数据后端接不到问题解决


Posted in Javascript onJanuary 09, 2020

1 前言

最近在前后端联调的时候发现了一个问题,可能自己平时不注意发送的内容格式,导致解决问题的路上,走了很多弯路,尤其是在刚刚懂了一点Vue知识之后,发送请求的各种花式写法也是让人头大,我在这把我踩到的坑给大家介绍一下吧。

2 问题

这个问题是我前端登录的时候向后端发生post请求。在使用这个接口前,我使用 postman 确认过了几次,接口传参是没有问题的,而且使用params或者body传参都是能接收到的。然而还是报错了……我们先来看看一个截图吧。

Vue-axios-post数据后端接不到问题解决

我向后端发参数的时候无论如何我都接不到数据,然后我就开始各种怀疑和猜测

( a )后端接口问题
如果是后端接口问题,那么我用postman接到了呀,所以这一条虽然我不信,但是我还是去各种尝试修改,我修改的接口传递方式,我怀疑是不是跨域失败,然而都没能解决我的问题。

( b )怀疑跨域未成功
我仔细检查了是否存在全局代理(各种代理工具)
是否存在nodejs本身问题

( c )发送参数问题

我的请求代码如下:

axios.post('/api/home/login',{
     params: {
      username: this.username,
      password: this.password
     }
    }).then(this.handleLoginSucc)

我自认为没有问题,但是又不敢确定,于是我又换了一种写法

// main.js配置
import axios from 'axios'
// 配置请求的根路径
axios.defaults.baseURL = 'http://localhost:8088/caeser/'
Vue.prototype.$http = axios

// 代码调用
// 设置同步方法 async
const{ data: res } await this.$http.post('users', { params: this.queryInfo })

然而并不能解决我的问题,因为发送的内格式依然没有变化。

最后我找了解决办法,而且确定了内容格式是formdata

3 解决办法

3.1 办法1

var params = new URLSearchParams()
// 参数保存
params.append('username', this.loginForm.username)
params.append('password', this.loginForm.password)
// post发送
axios.post('/api/home/login', params).then(this.handleLoginSucc)

这次我就能接到了,我们看看内容格式是什么

Vue-axios-post数据后端接不到问题解决

Content-type依然是application/json,但是数据格式变成了 Form Data,于是问题迎刃而解了。

这个问题困扰了我两天,算是吸取一个教训吧,复习了一下请求方面的知识,算是有所进步了。

3.1.1 兼容性

有个很重要提醒:所有浏览器都不支持URLSearchParams,但是有一个polyfill可用(确保polyfill全局环境)

// 安装
// npm install url-search-params-polyfill --save

ES2015+

import 'url-search-params-polyfill';

3.2 办法2

这个办法我建议使用,因为可以解决兼容性问题
使用qs库对数据进行编码

var qs = require('qs');
axios.post('/foo', qs.stringify({ 'bar': 123 });

使用qs库编码发送请求后端也是可以接收到的。

3.3 办法3

不推荐使用

axios.post(url,{data:{},
 headers:{content-type:'application/x-www-form-unlencoded'}
})

4 Request payload 和 FormData 区别

FormData和Payload是浏览器传输给后端接口的两种内容格式,这两种方式浏览器是通过Content-Type来进行区分的,如果是 application/x-www-form-urlencoded的话,则为formdata方式,如果是application/json或multipart/form-data的话,则为 request payload

下面内容为后端内容

4.1 后端代码如何处理这两种格式

Request payload
对于 Request Payload 请求, 必须加 @RequestBody 才能将请求正文解析到对应的 bean 中,且只能通过 request.getReader() 来获取请求正文内容

Form Data
无需任何注解,springmvc 会自动使用 MessageConverter 将请求参数解析到对应的 bean,且通过 request.getParameter(…) 能获取请求参数

我自己后端代码就是因为没有使用 request.getReader() 来获取,才出现的问题

上面内容为后端内容

5 复习js和jquery的请求

jquery的请求很方便,格式很清晰

$.ajax({
  url : targeturl,
  type : 'POST',
  data : formData,
  contentType : false,
  processData : false,
  cache : false,
  success : function(data) {
    if (data.success) {
      // success
    } else {
      // error
    }
  }
});

JavaScript

function sendData(data) {
 var XHR = new XMLHttpRequest();
 var urlEncodedData = "";
 var urlEncodedDataPairs = [];
 var name;
 // 将数据对象转换为URL编码的键/值对数组。
 for(name in data) {
  urlEncodedDataPairs.push(encodeURIComponent(name) + '=' + encodeURIComponent(data[name]));
 }
 urlEncodedData = urlEncodedDataPairs.join('&').replace(/%20/g, '+');
 // 定义成功数据提交时发生的情况
 XHR.addEventListener('load', function(event) {
  //
 });
 // 定义错误提示
 XHR.addEventListener('error', function(event) {
  //
 });
 // 建立我们的请求
 XHR.open('POST', 'https://example.com/cors.php');
 // 为表单数据POST请求添加所需的HTTP头
 XHR.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
 // 最后,发送我们的数据。
 XHR.send(urlEncodedData);
}

6 Axios知识点

6.1 全局默认值

axios.defaults.baseURL = 'https://caeser.com';
axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;
axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';

6.2 拦截器

//添加请求拦截器
axios.interceptors.request.use(function(config){
   // before success
   // must return config
   // 必须返回config
   return config;
  }, function(error){
   // error
  })
 
//添加响应拦截器
axios.interceptors.response.use(function(response){
   // 
   return response;
  },function(error){
   // error
  });

或者自定义实体

var instance = axios.create();
instance.interceptors.request.use(function () {/*...*/});

7 总结

在学习vue的过程中是非常容易的,因为vue真的很方便使用,学起来很快,都是模板语法,直接COPY就行了,而且逻辑性很简单,就是在使用的时候,各种版本和插件要学会调试,多尝试多使用,而且为了好好写前端,我都下载了离线的CSS样式文件,因为很多样式我都没背下来,而且很多样式我都不知道,有很多新的好用的特性,都是值得使用的。

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

Javascript 相关文章推荐
JQuery 1.6发布 性能提升,同时包含大量破坏性变更
May 10 Javascript
jQuery Tools tab(幻灯片)
Jul 14 Javascript
JS清除IE浏览器缓存的方法
Jul 26 Javascript
使用jQuery重置(reset)表单的方法
May 05 Javascript
JS自定义对象实现Java中Map对象功能的方法
Jan 20 Javascript
微信小程序 教程之注册程序
Oct 17 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
js循环map 获取所有的key和value的实现代码(json)
May 09 Javascript
js原生map实现的方法总结
Jan 19 Javascript
Vue3项目打包后部署到服务器 请求不到后台接口解决方法
Feb 06 Javascript
详解Node.js使用token进行认证的简单示例
May 25 Javascript
原生JavaScript实现五子棋游戏
Nov 09 Javascript
一看就会的vuex实现登录验证(附案例)
Jan 09 #Javascript
Websocket 向指定用户发消息的方法
Jan 09 #Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 #Javascript
JS实现商品橱窗特效
Jan 09 #Javascript
微信小程序实现页面浮动导航
Jan 08 #Javascript
微信小程序基于movable-view实现滑动删除效果
Jan 08 #Javascript
小程序自定义模板实现吸顶功能
Jan 08 #Javascript
You might like
php数值转换时间及时间转换数值用法示例
2017/05/18 PHP
Laravel中的chunk组块结果集处理与注意问题
2018/08/15 PHP
tp5框架无刷新分页实现方法分析
2019/09/26 PHP
让您的菜单不离网站
2006/10/03 Javascript
JS逆序遍历实现代码
2014/12/02 Javascript
快速掌握Node.js环境的安装与运行方法
2016/02/16 Javascript
浅谈js中StringBuffer类的实现方法及使用
2016/09/02 Javascript
简单实现jQuery级联菜单
2017/01/09 Javascript
JavaScript 函数的定义-调用、注意事项
2017/04/16 Javascript
vue渲染方式render和template的区别
2020/06/05 Javascript
[13:56]DAC2018 4.5SOLO赛决赛 MidOne vs Paparazi第一场
2018/04/06 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
python字符串连接方式汇总
2014/08/21 Python
自己使用总结Python程序代码片段
2015/06/02 Python
简单谈谈python中的Queue与多进程
2016/08/25 Python
python实现下载文件的三种方法
2017/02/09 Python
numpy中的ndarray方法和属性详解
2019/05/27 Python
Python 实现自动导入缺失的库
2019/10/29 Python
python logging添加filter教程
2019/12/24 Python
Python RabbitMQ实现简单的进程间通信示例
2020/07/02 Python
python实现测试工具(二)——简单的ui测试工具
2020/10/19 Python
塔吉特百货公司官网:Target
2017/04/27 全球购物
俄罗斯电子产品在线商店:UltraTrade
2020/01/30 全球购物
为什么group by 和order by会使查询变慢
2014/05/16 面试题
学前教育毕业生自荐信
2013/10/29 职场文书
百度吧主申请感言
2014/01/12 职场文书
三爱活动实施方案
2014/03/19 职场文书
承诺书的格式范文
2014/03/28 职场文书
支部组织生活会方案
2014/06/10 职场文书
2015年副班长工作总结
2015/05/15 职场文书
撤诉申请怎么写
2015/05/19 职场文书
防溺水安全教育主题班会
2015/08/12 职场文书
导游词之南京中山陵
2019/11/27 职场文书
Nginx反向代理及负载均衡如何实现(基于linux)
2021/03/31 Servers
python 爬取华为应用市场评论
2021/05/29 Python
超越Nginx的Web服务器caddy优雅用法
2022/06/21 Servers