vue.js下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 并小改了一下

时间: 2016-05-05
Tags: 接口, 数组

vue.js下vue-resource 中 headers 的定义及修改需要的相关文章

Sql中存储过程的定义、修改和删除操作

1.存储过程的分类 系统存储过程 本地存储过程(用户自定义) 临时存储过程(局部[#].全局[##]临时存储过程) 2.创建存储过程 --选出价格区间的商品信息 create procedure sp_goods_price @minprice float ,@maxprice float as select * from goods where price>[email protected] and price <[email protected] go 执行存储过程: execute sp_goods_price 2

js下获取div中的数据的原理分析_javascript技巧

关于从中学到的知识: document.getelementbyid("ddhdh").innerHTML 可以获取到div中的全部数据,包括标签...但是只是在IE和OPERA中使用 document.getelementbyid("ddhdh").innerTEXT 可以获取到div中的文本数据,不会获取到标签...但是只是在IE和OPERA中使用 document.getElementById("text").textContent 用于在

js下拉菜单中自动信息轮换播放_表单特效

要完成此效果把如下代码加入到<body>区域中 Welcome To Typhoon Start. JavaScript Fairyland. _www.jb51.net. 我只是提出这种思路,其它要靠自己发挥喽. [Ctrl+A 全选 注:如需引入外部Js需刷新才能执行]

前端框架Vue.js中Directive知识详解_javascript技巧

Directive 看上去虽然和Angular中的定义类似,Directive 都是对DOM功能的一种拓展,但是 Vue 的 Directive 要弱的多.因为 Vue Component 其实本来就会包含对DOM的操作,所以大多数时候我们写一个通用组件都是一个Component 而不是一个 Directive,而 在 Angular 我们写一个通用的组件一般都是一个 Directive . 所以我说 Vue 的 Directive 相比于 Angular 要弱的多,也可以说纯粹的多,他就是对

使用 Cordova 和 Vue.js 创建移动应用

本文讲的是使用 Cordova 和 Vue.js 创建移动应用, Cordova 是一个你可以使用HTML, JavaScript 和 CSS 等 web 技术开发移动应用的框架.它支持使用一套基本代码面向多平台,如 Android 和 iOS .尽管你在开发中仍然需要用到该平台特定的技术,例如 Android SDK 或 Xcode ,你也无需再编写任何 Android 或 iOS 代码就能完成应用开发. 既然你能够掌握 HTML 和 JavaScript 代码的编写,使用Vue.js 这样配

Vue.js快速入门

Vue.js简介 Vue.js(读音 /vjuː/, 类似于view)是一套构建用户界面的渐进式框架.与其他重量级框架不同的是,Vue 采用自底向上增量开发的设计.Vue 的核心库只关注视图层,并且非常容易学习,非常容易与其它库或已有项目整合.另一方面,Vue 完全有能力驱动采用单文件组件和Vue生态系统支持的库开发的复杂单页应用.Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件. 作为前端的三大框架之一(其他两个是Angular.React),Vue得到了大多

Vue.js源码(1):Hello World的背后

下面的代码会在页面上输出Hello World,但是在这个new Vue()到页面渲染之间,到底发生了什么.这篇文章希望通过最简单的例子,去了解Vue源码过程.这里分析的源码版本是Vue.version = '1.0.20' <div id="mountNode">{{message}}</div>   var vm = new Vue({      el: '#mountNode',      data: function () {          retu

Vue.js和MVVM小细节

MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自动传递给 View,即所谓的数据双向绑定. Vue.js 是一个提供了 MVVM 风格的双向数据绑定的 Javascript 库,专注于View 层.它的核心是 MVVM 中的 VM,也就是 ViewModel. ViewModel负责连接 View 和 Model,保证视图和数据的一致性,这种轻量

vue.js+boostrap项目实践(案例详解)_javascript技巧

一.为什么要写这篇文章 最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变得更美观和更容易,同时vue.js又是可以绑定model和view(这个相当于MVC中的,M和V之间的关系),使得对数据变换的操作变得更加的简易,简化了很多的逻辑代码. 二.学习这篇文章需要具备的知识 1.需要有vue.js的知识 2.需要有一定的HTML.CSS.JavaScript的基础知识 3