http请求跨域post请求跨域问题

今天和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就转化成响应的编码

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。