今天和c++的同事联调创建一个应用接口，服务端增加了允许跨域请求。vue增加了代理proxytable
但是遇到一个奇怪的事情。当get请求时，可以发送数据，post请求时，只有conect链接comming进去，但是没有http请求。
经过联调互相查找原因发现是数据包体格式原因
代码片段
methods: {createApp(){
this.$fetch.api_app .appCreate(
{ user_id:this.form.user_id,
app_name:this.form.app_name,
system_type:this.form.system_type,
package_name:this.form.package_name
})
修改为
this.$fetch.api_app.appCreate(
Qs.stringify
( this.form)
)
浏览器响应结果上图
虽然是500错误，但是还是代表通了。剩下是服务端错误了。
查阅资料发现
application/x-www-form-urlencoded ： 窗体数据被编码为名称/值对。这是标准的编码格式。
multipart/form-data ： 窗体数据被编码为一条消息，页上的每个控件对应消息中的一个部分。
text/plain ： 窗体数据以纯文本形式进行编码，其中不含任何控件或格式字符。
补充
form的enctype属性为编码方式，常用有两种： application/x-www-form-urlencoded 和 multipart/form-data ， 默认为application/x-www-form-urlencoded 。
当action为get时候，浏览器用x-www-form-urlencoded的编码方式把form数据转换成一个字串（name1=value1&name2=value2…），然后把这个字串append到url后面，用?分割，加载这个新的url。
当action为post时候，浏览器把form数据封装到http body中，然后发送到server。
如果没有 type=file 的控件，用默认的 application/x-www-form-urlencoded 就可以了。
但是如果有 type=file 的话，就要用到 multipart/form-data 了。浏览器会把整个表单以控件为单位分割，并为每个部分加上Content-Disposition(form-data或者file)、Content-Type(默认为text/plain)、name(控件name)等信息，并加上分割符(boundary)。
在axios的官方文档中指出（https://www.kancloud.cn/yunye/axios/234845）
这里的主要操作是对 请求过程中的 then或者 catch
进行拦截 （也就是在请求发送前对我们的data数据进行 转化 ）
所以我们定义什么样的数据，axios就转化成响应的编码
网友评论