vue 中 axios的post请求，415错误

系统管理员 2022-12-27 09:24 101阅读 0赞

# **415错误** #

*  415是HTTP协议的状态码415的含义是不支持的媒体类型(Unsupported media type)检查是否在POST请求中加入了headerheader中是否包含了正确的Content-Type

# 需求分析 #

*  需求：请求本地平台上数据库的表单数据
 *  问题：请求415错误
 *  原因：请求格式头问题  
    ![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]

我想请求的是表单数据，但是一直默认是请求json数据，因为没有后端的原因，需要前端解决。

*  方法：

axios({ 
               method: 'post',
               url: 'http://localhost:8080/jsaas_war/restApi/sys/queryForJson?alias=three&params',
               data: JSON.stringify(),
               headers: { 
                 'Content-Type': 'application/x-www-form-urlencoded'
               },
               //下面这段代码
               transformRequest: [function (data) { 
                 let ret = ''
                 for (let it in data) { 
                   ret += encodeURIComponent(it) + '=' + encodeURIComponent(data[it]) + '&'
                 }
                 return ret
               }],
               
               
             }).then(res=>{ 
                 console.log(res);
             }).catch(err=>{ 
                 console.log(err);
             })

其中发挥关键作用的是headers与transformRequest。其中 headers 是设置即将被发送的自定义请求头。 transformRequest 允许在向服务器发送前，修改请求数据。这样操作之后，后台querystring.parse(decodeURIComponent(data))获取到的就是类似于\{ name: ‘w’, password: ‘w’ \}的对象。

另外一种办法就是后端去改，本文就不作具体解释了。。。

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NjMyODE0NA_size_16_color_FFFFFF_t_70_pic_center]: /images/20221120/b58d52308fd74b3dacfa403c07bda72e.png