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 相关文章推荐
用JS判别浏览器种类以及IE版本的几种方法小结
Aug 02 Javascript
MooBox 基于Mootools的对话框插件
Jan 20 Javascript
js 代码优化点滴记录
Feb 19 Javascript
解析使用js判断只能输入数字、字母等验证的方法(总结)
May 14 Javascript
jQuery使用ajaxSubmit()提交表单示例
Apr 04 Javascript
JavaScript中双叹号!!作用示例介绍
Sep 21 Javascript
Eclipse编辑jsp、js文件时卡死现象的解决办法汇总
Feb 02 Javascript
Bootstrap分页插件之Bootstrap Paginator实例详解
Oct 15 Javascript
jQuery插件DataTable使用方法详解(.Net平台)
Dec 22 Javascript
ionic实现下拉刷新载入数据功能
May 11 Javascript
Vue组件通信实践记录(推荐)
Aug 15 Javascript
JavaScript变量声明var,let.const及区别浅析
Apr 23 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 mkdir()无写权限的问题解决方法
2014/06/19 PHP
PHP实现简易计算器功能
2020/08/28 PHP
简单的无缝滚动程序-仅几行代码
2007/05/08 Javascript
JavaScript使用过程中需要注意的地方和一些基本语法
2010/08/26 Javascript
js简单实现交换Li的值
2014/05/22 Javascript
javascript的BOM汇总
2015/07/16 Javascript
Knockoutjs 学习系列(一)ko初体验
2016/06/07 Javascript
node文件批量重命名的方法示例
2017/10/23 Javascript
在微信小程序中渲染HTML内容的方法示例
2018/09/28 Javascript
Vue动态生成表格的行和列
2019/07/18 Javascript
JavaScript this在函数中的指向及实例详解
2019/10/14 Javascript
vue css 引入asstes中的图片无法显示的四种解决方法
2020/03/16 Javascript
Js图片点击切换轮播实现代码
2020/07/27 Javascript
js实现点击按钮随机生成背景颜色
2020/09/05 Javascript
给Python中的MySQLdb模块添加超时功能的教程
2015/05/05 Python
Python多进程分块读取超大文件的方法
2016/04/13 Python
Python中使用支持向量机(SVM)算法
2017/12/26 Python
django 通过ajax完成邮箱用户注册、激活账号的方法
2018/04/17 Python
Django框架视图层URL映射与反向解析实例分析
2019/07/29 Python
python怎么判断模块安装完成
2020/06/19 Python
如何通过python实现IOU计算代码实例
2020/11/02 Python
使用CSS3的appearance属性改变任何元素的浏览器默认风格
2012/12/24 HTML / CSS
css3实现可滑动跳转的分页插件示例
2014/05/08 HTML / CSS
HTML5中实现拖放效果无须借助javascript
2012/12/26 HTML / CSS
C语言中break与continue的区别
2012/07/12 面试题
Order by的几种用法
2013/06/16 面试题
校园活动策划书范文
2014/01/10 职场文书
企业办公室岗位职责
2014/03/12 职场文书
行政部岗位职责范本
2014/03/13 职场文书
标准毕业生自荐信
2014/06/24 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
2015年学校食堂工作总结
2015/04/22 职场文书
公务员爱岗敬业心得体会
2016/01/25 职场文书
Spring Boot 实现敏感词及特殊字符过滤处理
2021/06/29 Java/Android
Django基础CBV装饰器和中间件
2022/03/22 Python
Mybatis-Plus 使用 @TableField 自动填充日期
2022/04/26 Java/Android