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

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

这篇文章主要讲解了“Vue中使用axios调用后端接口的坑怎么解决”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“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

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

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

亲测有效!

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

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

感谢各位的阅读,以上就是“Vue中使用axios调用后端接口的坑怎么解决”的内容了,经过本文的学习后,相信大家对Vue中使用axios调用后端接口的坑怎么解决这一问题有了更深刻的体会,具体使用情况还需要大家实践验证。这里是恰卡编程网,小编将为大家推送更多相关知识点的文章,欢迎关注!

发布于 2022-03-29 22:39:51
收藏
分享
海报
0 条评论
30
上一篇:C语言如何实现自定义扫雷游戏 下一篇:Java的代理模式怎么理解
目录

    0 条评论

    本站已关闭游客评论,请登录或者注册后再评论吧~

    忘记密码?

    图形验证码