vue-resource emulateJSON的作用

今天有个同事问我vue-resource emulateJSON的作用，这要从vue-resource这个库说起了，这个库发送post请求会默认的把请求参数转换成json格式，并且请求头会设置这个属性：Content-Type:application/json;charset=UTF-8

看一下测试代码：

import Vue from 'vue'
import App from './App'
import router from './router'
import VueResource from 'vue-resource'
Vue.use(VueResource);
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  created(){
      this.$http.post('https://cnodejs.org/api/v1/topics',{
        a:100,
        b:'100'
      }).then((data)=>{
      console.log(data)
    })
  },
  render: h => h(App)
})

结果如图：

而如果将emulateJSON设置true，vue-resource用post方式发送数据会以表单形式发送，也就是这种格式：application/x-www-form-urlencoded。

设置emulateJSON为true时（默认为false）只需将如下代码添加到主文件中即可：

Vue.http.options.emulateJSON=true

测试结果如下：

可以看到将emulateJSON的属性设置为true之后，请求头中的Content-Type变成了application/x-www-form-urlencoded,并且数据的传输格式也变为了From Data的格式。

前端工程师在处理这里的时候一定要和后端工程师沟通好，确定好后端能够处理哪种类型的数据，最好的解决方案是后端两种方式都支持。