vue-resource 中 headers 的定义及修改需要

common 与 custom 的区别

vue-resource 是我用来与接口进行交互的 vue 插件,而 vue-resource 提供的 header 的设置方法有如下两种:

Vue.http.headers.common['Token']
Vue.http.headers.custom['Token']

他们的区别是什么?我们看看以下的源码(vue-resource/src/http/header.js

request.headers = _.extend({}, _.http.headers.common,
	!request.crossOrigin ? _.http.headers.custom : {},
	_.http.headers[request.method.toLowerCase()],
	request.headers
);

request 在发送前会把 common 数组加入 headers,而 custom,只有当访问地址非异域的时候才加入 headers


个人的修改需要

由于我做的是APP项目,对于手机本地来说,所有接口都是异域,所以如果把需要传递的头部信息都放在 custom 中,其实就是虚的,所以只能放在 common 中,但是,当我需要访问百度地图 api、QQ api、weibo api 等接口的时候,common依然会被传过去,将产生异域错误,因为有不被允许的头部信息。

于是,我做了一点修改,通过Vue.http.options.root设置APP专用接口的公用路径,然后在使用http方法的时候只需要使用相对路径,此时,就可以通过是否以http:https:开头来区分是否是真正意义上的异域,下面直接上代码:

request.headers = _.extend(
	{},
	request.url.match(/^(https?:)?\//) ? [] : _.http.headers.common,
	!request.crossOrigin ? _.http.headers.custom : {},
	_.http.headers[request.method.toLowerCase()],
	request.headers
);

我把 vue-resource fork 并小改了一下,项目地址:

https://github.com/coolhihi/vue-resource

若您觉得我的博文对您有帮助,欢迎点击下方按钮对我打赏
打赏