Vue中使用axios调用后端接口的坑及解决

目录
  • axios调用后端接口的坑
    • 问题场景
    • 总结了如下场景
  • 调用后端接口 使用axios跨域问题
    • 首先找到项目中vue.config.js

axios调用后端接口的坑

问题场景

Vue.js工程中使用axios调用后端接口(SpringBoot构建)出现后端接口无法获得数据的情况

总结了如下场景

@RequestParam用来处理application/x-www-form-urlencoded编码(HTTP协议请求头中不指定Content-Type默认就是application/x-www-form-urlencoded)。

@RequestParam可以接受简单类型的属性，也可以接受对象类型的属性，实质就是将Request.getParameter()中的键值对Map利用Spring的转化机制ConversionService配置，转化成参数接受对象或者字段。

@RequestParam在GET请求中是QueryString的形式，POST请求BodyData的值都会被Servlet接受并转化为Request.getParameter()参数集中。

@RequestParam在POST请求指定Content-Type为application/json;charset=UTF-8时会出现400错误。

@RequestParam不能使用@RequestParam JSONObject params接受参数，否则会出现500错误。

@RequestParam前端不能使用JSON.stringify()格式化参数，可以使用axios中的QS代替：QS.stringify()。

@RequestBody用来处理HTTPEntity(HTTP实体，HttpEntity实体即可以使流也可以使字符串形式)传递过来的数据，一般用于处理非application/x-www-form-urlencoded编码。

GET请求没有HTTPEntity所以@RequestBody并不适用，否则参数会乱码导致400错误。

在POST请求中使用@RequestBody时，通过HTTPEntity传递参数，必须要在HTTP请求头设置Content-Type为application/json;chatset=UTF-8，否则会出现415错误，SpringMVC通过使用HandlerAdapter配置HTTPMessageConverter来解析HTTPEntity中的数据，然后绑定到Bean上。

在POST请求使用@RequestBody时，前端必须使用JSON.stringify()格式化为JSON字符串数据。

注解 支持类型 支持的请求类型 支持的Content-Type请求头类型
@PathVariable URL GET ALL
@RequestParam URL GET ALL
@RequestParam Body ALL application/form-data, application/x-form-www-urlencoded
@RequestBody Body ALL aplication/json

调用后端接口 使用axios跨域问题

首先找到项目中vue.config.js

修改 devserver

devserver /api/app  等于 /https://www.lifewhw.top/app,

devserver下 配置ip 端口没问题 换成域名访问接口时如出现 Access-Control-Allow-Origin   跨域问题

去后端 请求头 设置 access-control-allow-origin: '*'

亲测有效!

1.如果调用一次axios 发送了两条get 请求 并且 其中一条状态码为301 说明是重定向 浏览器帮你从新发送了请求(原因是你前端路由配置的和后端不同,我是因为少配置了/出现发送两次get请求 其中一次为301)

2. 还有一冲情况就是 两次请求 第一次的请求头为options 这个原因自行百度一大推

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (0)

相关推荐

  • 详解vue中使用axios对同一个接口连续请求导致返回数据混乱的问题

    业务上出现一个问题:如果连续对同一个接口发出请求,参数不同,有时候先请求的比后请求的返回数据慢,导致数据顺序混乱,或者数据被覆盖的问题,所以需要控制请求的顺序. 解决方法: 1.直接跟后台沟通,将所有参数放到数组里后台统一接收并返回所有数据再由前端进行数据的拆分使用. 2.对于出现返回的数据混乱问题. 假设场景: 页面中需要对三个部门请求对应的部门人员,三个部门人员的数据为一个二维数组,连续发送请求,但由于返回数据的顺序不定,导致数组中的数据顺序不是按照部门的顺序. 解决方法:使用promise

  • VUE使用axios调用后台API接口的方法

    引言 Vue (读音 /vjuː/,类似于 view) 是一套用于构建用户界面的渐进式JavaScript框架.与其它大型框架不同的是,Vue 被设计为可以自底向上逐层应用.Vue 的核心库只关注视图层,方便与第三方库或既有项目整合.我们都知道VUE更多是注重前段用户界面的渲染合操作,但是如果想到实现前后端之间的交互调用后台API,就需要借助其他组件,如今天要讲到的Axios,下边就重点讲解axios在vue中的使用. Axios,基于 Promise 的 HTTP 客户端,可以工作于浏览器中,

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

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

    1 前言 最近在前后端联调的时候发现了一个问题,可能自己平时不注意发送的内容格式,导致解决问题的路上,走了很多弯路,尤其是在刚刚懂了一点Vue知识之后,发送请求的各种花式写法也是让人头大,我在这把我踩到的坑给大家介绍一下吧. 2 问题 这个问题是我前端登录的时候向后端发生post请求.在使用这个接口前,我使用 postman 确认过了几次,接口传参是没有问题的,而且使用params或者body传参都是能接收到的.然而还是报错了--我们先来看看一个截图吧. 我向后端发参数的时候无论如何我都接不到数

  • 解决vue中使用Axios调用接口时出现的ie数据处理问题

    1.问题 近期在使用vue2 + axios 调用接口时碰到一个IE中很奇葩的问题,让我头痛了很久. 废话不多扯,就是在其他浏览器中调用接口返回数据然后可以很顺利的进行处理,但在IE(9-11)中发现发送请求是成功的而且也能抓到服务端返回来的数据.却发现在处理返回来的数据的时候处理的有点问题,怎么搞就是不行. 2.处理过程及方法 我使用了console大法去解决这个问题,具体是这样的:我先将服务器返回过来的数据打印到浏览器控制台,结果发现都能打印出来,这个时候就郁闷了,明明有数据为何在IE上还是

  • Vue中使用axios调用后端接口的坑及解决

    Vue中使用axios调用后端接口的坑及解决

    目录 axios调用后端接口的坑 问题场景 总结了如下场景 调用后端接口 使用axios跨域问题 首先找到项目中vue.config.js axios调用后端接口的坑 问题场景 Vue.js工程中使用axios调用后端接口(SpringBoot构建)出现后端接口无法获得数据的情况 总结了如下场景 @RequestParam用来处理application/x-www-form-urlencoded编码(HTTP协议请求头中不指定Content-Type默认就是application/x-www-f

  • vue中封装axios并实现api接口的统一管理

    在vue项目中,我们通常都是使用axios与后台进行数据交互,axios有很多好用的特性,这里不多做介绍,相关细节可以查阅axios中文网.在对axios进行封装之前,我们要使用vue脚手架工具创建一个vue项目(这里我用的是cli4). 安装 cnpm install axios --save-dev; // 安装axios cnpm install qs --save-dev; // 安装qs模块,用来序列化post类型的数据,否则后端无法接收到数据 模块引入 在src目录下创建一个serv

  • 前端如何调用后端接口进行数据交互详解(axios和SpringBoot)

    目录 一.介绍 二.项目结构 三.代码编写 四.运用 总结 前端调用后端接口,获得数据并渲染 一.介绍 一个完善的系统,前后端交互是必不可少的,这个过程可以分成下面几步: 前端向后端发起请求后端接口接收前端的参数后,开始层层调用方法处理数据后端将最终数据返回给前端接口前端请求成功后,将数据渲染至界面 对于初学者而言,前后端交互感觉十分困难,其实并不难,现在,我们做一个小例子,在例子中,大家就明白了. 二.项目结构 前端技术:axios 后端技术:SpringBoot(这个也无所谓,但是你一定要有

  • 关于element-ui中el-form自定义验证(调用后端接口)

    关于element-ui中el-form自定义验证(调用后端接口)

    目录 element-ui中el-form自定义验证 需求 element-ui自定义form表单校验规则 注意 element-ui中el-form自定义验证 需求 在输入项目名称后,调用后端接口isNameOnly,若已存在,则效果如下图: 1.先设置校验规则rules <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px&quo

  • vue+axios实现文件下载及vue中使用axios的实例

    功能:点击导出按钮,提交请求,下载excel文件: 第一步:跟后端童鞋确认交付的接口的response header设置了 以及返回了文件流. 第二步:修改axios请求的responseType为blob,以post请求为例: axios({ method: 'post', url: 'api/user/', data: { firstName: 'Fred', lastName: 'Flintstone' }, responseType: 'blob' }).then(response =>

  • vue axios数据请求及vue中使用axios的方法

    axios 简介 axios 是一个基于Promise 用于浏览器和 nodejs 的 HTTP 客户端,它本身具有以下特征: -------------------------------------------------------------------------------- •从浏览器中创建 XMLHttpRequest •从 node.js 发出 http 请求 •支持 Promise API •拦截请求和响应 •转换请求和响应数据 •取消请求 •自动转换JSON数据 •客户端支

  • vue简单封装axios插件和接口的统一管理操作示例

    本文实例讲述了vue简单封装axios插件和接口的统一管理操作.分享给大家供大家参考,具体如下: 现在很多公司的项目都是前后端分离的项目,那么说到前后端分离,必定会有ajax请求来获得后台的数据. 在做jquery项目的时候,我们都会使用它封装好的方法来直接发起ajax请求. 在vue项目中,我们使用最多的就是axios这个插件,下面就简单的封装下这个插件并且把接口给统一化管理. 一.安装和配置 1.在项目根目录下打开终端安装 npm install axios -S 2.安装完成以后,在src

  • 在vue中使用axios实现post方式获取二进制流下载文件(实例代码)

    需求 点击导出下载表格对应的excel文件 在 vue 项目中,使用的 axios ,后台 java 提供的 post 接口 api 实现 第一步,在 axios 请求中加入参数,表示接收的数据为二进制文件流 responseType: 'blob' 第二步,在拿到数据流之后,把流转为指定文件格式并创建a标签,模拟点击下载,实现文件下载功能 let blob = res.data let reader = new FileReader() reader.readAsDataURL(blob) r

随机推荐