重识vue-resource

[xixigiggling]

由于一直以为vue-resource，改不了baseUrl以及像利用axios来每次请求都在头部自动加上JWT_Token（Vue 进阶教程之：Axios配置JWT/封装插件/发送表单数据），再加上就连官方都没推荐了，就一直打入冷宫，突然这次因为axios，自己遇到一些跨域的问题，不知道到底是什么回事，就又换回了vue-resource，现在才发现，只是自己不懂...这些原来都有

改baseUrl：

//Set default values using the global configuration
Vue.http.options.root = 'http://47.106.111.100:8088';

// Set default values inside your Vue component options.
new Vue({

  http: {
    root: '/root',
    headers: {
      Authorization: 'Basic YXBpOnBhc3N3b3Jk'
    }
  }

})

神奇的是：

// 只开这个即可
Vue.http.options.root = 'http://47.106.111.100:8088';

而在vue实例中开不开http选项都没关系...

//测试: 在`main.js`中写入
new Vue({
    el: '#app',
    router,
    http: {
        root: 'http://47.106.111.100:8088',
    },
    components: {App},
    template: '<App/>',
});

另一个注意事项就是：

Note that for the root option to work, the path of the request must be relative

Vue.http.get('someUrl') while this will not: Vue.http.get('/someUrl')

也就是在写成this.$http.post('/rest/app/register', test)的时候是不行的，必须要在url中写成'rest/app/register'

头部自动加上JWT_Token：

同上所示： Vue.http.headers.common['Authorization'] = 'Basic YXBpOnBhc3N3b3Jk';

另还有不支持json，要application/x-www-form-urlencoded的MIME type的转化：Vue.http.options.emulateJSON = true;

结论是：好好看文档

参考链接：

Configuration-官方文档

vue-resource headers如何动态地设置