vue-axios使用,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-form-urlencoded)。
@RequestParam可以接受简单类型或对象类型的属性。本质上，Request.getParameter()中的键值对映射是由Spring的转换机制ConversionService配置的，转换成参数接受对象或字段。
@RequestParam在GET请求中是QueryString的形式，POST请求中的BodyData的值会被Servlet接受并转换成Request.getParameter()参数集。
@RequestParam在POST请求中将内容类型指定为application/JSON；当字符集=UTF-8时，出现400错误。
@RequestParam不能接受带有@RequestParam JSONObject params的参数，否则将出现500错误。
@RequestParam前端不能使用JSON.stringify()格式化参数，可以在axios中使用QS代替：QS.stringify()。
@RequestBody用于处理HTTPEntity(HttpEntity，可以做成流或者字符串的形式)传递的数据。一般用于处理非应用/x-www-form-urlencoded编码。
请求没有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字符串数据。
注释支持的类型支持的请求类型支持的内容类型请求标头类型@ pathfvariableurltag @ requestparamrultag @ requestparamdbodyapplication/form-data，application/x-form-www-urlencoded @ requestbodybodyapplication/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，是百度自己大力推的。
以上个人经历，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。