vue中axios的post请求,415错误问题怎么解决
本篇内容主要讲解“vue中axios的post请求,415错误问题怎么解决”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue中axios的post请求,415错误问题怎么解决”吧!
vue axios的post请求415错误
415错误
415是HTTP协议的状态码415的含义是不支持的媒体类型(Unsupported media type)检查是否在POST请求中加入了headerheader中是否包含了正确的Content-Type
需求分析
需求：请求本地平台上数据库的表单数据
问题：请求415错误
原因：请求格式头问题
我想请求的是表单数据，但是一直默认是请求json数据，因为没有后端的原因，需要前端解决。
方法：
axios({method:'post',url:'localhost:8080/jsaas_war/restApi/sys/queryForJson?alias=three¶ms',data:JSON.stringify(),headers:{'Content-Type':'application/x-form-urlencoded'},//下面这段代码transformRequest:[function(data){letret=''for(letitindata){ret+=encodeURponent(it)+'='+encodeURponent(data[it])+'&'}returnret}],}).then(res=>{console.log(res);}).catch(err=>{console.log(err);})其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。
transformRequest 允许在向服务器发送前，修改请求数据。
这样操作之后，后台querystring.parse(decodeURponent(data))获取到的就是类似于{ name: ‘w’, password: ‘w’ }的对象。
vue-axios的get、post请求
直接在控制台上打印axios会报错，打印fetch就不会；
因为fetch是标准，axios是第三方，要想用axios，就必须引入想应的js文件；
axios-js文件下载：npm
搜索axios，点进去，往下找：
打开链接：“cdn.jsdelivr.net/npm/axios@1.1.2/dist/axios.min.js”，ctrl+s保存源码，就下载好了；
然后引入到html中就可以使用了。
get方式：axios请求数据核心代码
axios.get("./test.json").then(res=>{console.log(res)//数据在res.data.data.films里console.log(res.data.data.films)})完整代码：
<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><metahttp-equiv="X-UApatible"content="IE=edge"><metaname="viewport"content="width=device-width,initial-scale=1.0"><title>Document</title><scriptsrc="../lib/vue.js"></script><scriptsrc="axios.min.js"></script></head><body><divid="box"><button@click="handleClick">axios</button></div><script>newVue({el:"#box",data:{},methods:{handleClick(){axios.get("./test.json").then(res=>{console.log(res)//数据在res.data.data.films里console.log(res.data.data.films)})}}})</script></body></html>结果：
post方式：不用写headers
携带的信息放在第二个参数位置上就可以了，不用写其他的；
handleClick(){axios.post("./test.json","name=yiyi&age=100").then(res=>{console.log(res)//数据在res.data.data.films里console.log(res.data.data.films)})}axios.post("./test.json",{name:"yiyi",age:100})axios请求数据的方式比fetch方式更简单，直接一个then就可以；
而且post方式还不用写headers，直接写数据，会自动查看你携带的数据是什么类型。
到此，相信大家对“vue中axios的post请求,415错误问题怎么解决”有了更深的了解，不妨来实际操作一番吧！这里是主机评测网网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！
下一篇：Java中Maven打包方式和执行jar的方法是什么