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

 更新时间:2022年03月29日 13:59:14   作者:许少年的读书笔记  
这篇文章主要介绍了Vue中使用axios调用后端接口的坑及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教

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请求头类型
@PathVariableURLGETALL
@RequestParamURLGETALL
@RequestParamBodyALLapplication/form-data, application/x-form-www-urlencoded
@RequestBodyBodyALLaplication/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 这个原因自行百度一大推 

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • Vue中控制v-for循环次数的实现方法

    Vue中控制v-for循环次数的实现方法

    今天小编就为大家分享一篇Vue中控制v-for循环次数的实现方法,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-09-09
  • 浅谈Vue的基本应用

    浅谈Vue的基本应用

    本文主要介绍了Vue的基本应用。具有一定的参考价值,需要的朋友一起来看下吧
    2016-12-12
  • :visible.sync 的作用详解

    :visible.sync 的作用详解

    我们在前端开发中经常看到:visible.sync这种修饰符,很多人不知道这是干什么的,在使用ElementUI的时候,里面有个弹窗el-dialog组件的时候会有用到:visible.sync,今天小编带领大家学习下:visible.sync 的作用,感兴趣的朋友一起看看吧
    2022-11-11
  • vue组件中传值EventBus的使用及注意事项说明

    vue组件中传值EventBus的使用及注意事项说明

    这篇文章主要介绍了vue组件中传值EventBus的使用及注意事项说明,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-11-11
  • vue+element加入签名效果(移动端可用)

    vue+element加入签名效果(移动端可用)

    这篇文章主要介绍了vue+element加入签名效果(移动端),本文通过实例代码给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2019-06-06
  • 一文搞定vue3中的函数式弹窗

    一文搞定vue3中的函数式弹窗

    函数式弹窗是一种使用函数来创建弹窗的技术,它可以简化弹窗的使用,只需要在需要弹窗的地方调用函数就可以了,下面我们就来看看vue3中函数式弹窗的具体应用吧
    2024-01-01
  • 简单谈一谈Vue中render函数

    简单谈一谈Vue中render函数

    vue中的render函数,它返回的是一个虚拟节点vnode,也就是我们要渲染的节点,下面这篇文章主要给大家介绍了关于Vue中render函数的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-09-09
  • vue3将页面生成pdf导出的操作指南

    vue3将页面生成pdf导出的操作指南

    最近工作中有需要将一些前端页面(如报表页面等)导出为pdf的需求,下面这篇文章主要给大家介绍了关于vue3 如何将页面生成 pdf 导出,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-07-07
  • Vue代码整洁之去重方法整理

    Vue代码整洁之去重方法整理

    在本篇文章里小编给大家整理的是关于Vue代码整洁之去重的相关知识点内容,需要的朋友们学习下。
    2019-08-08
  • vue之保留小数点两位小数 使用filters(过滤器)

    vue之保留小数点两位小数 使用filters(过滤器)

    这篇文章主要介绍了vue之保留小数点两位小数 使用filters(过滤器),具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2023-11-11

最新评论