在AngularJs中设置请求头信息(headers)的方法及不同方法的比较


Posted in Javascript onSeptember 04, 2018

在AngularJs中有三种方式可以设置请求头信息:

1、在http服务的在服务端发送请求时,也就是调用

http服务的在服务端发送请求时,也就是调用

http()方法时,在config对象中设置请求头信息:事例如下:

$http.post('/somePath' , someData , {
    headers : {'Authorization' : authToken}
  }).success(function(data, status, headers, config) {
    //...
  }).error(function(data, status, headers, config ) {
    //...
  });

这种方法的好处就是针对不同路径的请求,可以个性化配置请求头部,缺点就是,不同路径请求都需要单独配置。

2、第二种设置请求头信息的方式就是在$httpProvider.defaults.headers属性上直接配置。事例如下:

ngular.module('app', [])
.config(function($httpProvider) {
  $httpProvider.defaults.headers.common = { 'My-Header' : 'value' }
})

$httpProvider.defaults.headers有不同的属性,如common、get、post、put等。因此可以在不同的http请求上面添加不同的头信息,common是指所有的请求方式。

这种方式添加请求头信息的优势就是可以给不同请求方式添加相同的请求头信息,缺点就是不能够为某些请求path添加个性化头信息。

3、第三种设置请求头信息的地方是$httpProvider.interceptors。也就是为请求或相应注册一个拦截器。使用这这方式我们首先需要定义一个服务。

myModule.factory('authInterceptor', function($rootScope, $cookies){
  return {
    request: function(config){
      config.headers = config.headers || {};
      if($cookies.get('token')){
        config.headers.authorization = 'Bearer ' + $cookies.get('token');
      }
      return config;
    },
    responseError: function(response){
      // ...
    }
  };
})

然后把上面定义的服务注册到$httpProvider.interceptors中。

.config(function($httpProvider){
  $httpProvider.interceptors.push('authInterceptor');
})

这样,对于每次请求,不论是get还是post、put。我们都会在请求头信息中加入authorization属性。这种方式在处理验权、授权方面很有用的。但是确定就是不能够为特定的请求方式添加请求头信息。

上面总共有三种方式设置头信息,选择那种方式可以根据自己的需求。

总结

以上所述是小编给大家介绍的在AngularJs中设置请求头信息(headers)的方法及不同方法的比较,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery 插件学习(五)
Aug 06 Javascript
Jquery右下角抖动、浮动 实例代码(兼容ie6、FF)
Aug 15 Javascript
javascript获取和判断浏览器窗口、屏幕、网页的高度、宽度等
May 08 Javascript
javascript图片预加载完整实例
Dec 10 Javascript
JS+JSP通过img标签调用实现静态页面访问次数统计的方法
Dec 14 Javascript
Bootstrap入门书籍之(五)导航条、分页导航
Feb 17 Javascript
jQuery仿京东商城楼梯式导航定位菜单
Jul 25 Javascript
基于KO+BootStrap+MVC实现的分页控件代码分享
Nov 07 Javascript
基于MVC方式实现三级联动(JavaScript)
Jan 23 Javascript
Node.js使用Express创建Web项目详细教程
Mar 31 Javascript
Angularjs的启动过程分析
Jul 18 Javascript
JS操作Fckeditor的一些常用方法(获取、插入等)
Feb 19 Javascript
webpack 3.X学习之多页面打包的方法
Sep 04 #Javascript
JS获取并处理php数组的方法实例分析
Sep 04 #Javascript
vue click.stop阻止点击事件继续传播的方法
Sep 04 #Javascript
vue form 表单提交后刷新页面的方法
Sep 04 #Javascript
原生JS实现动态加载js文件并在加载成功后执行回调函数的方法
Dec 30 #Javascript
微信小程序内拖动图片实现移动、放大、旋转的方法
Sep 04 #Javascript
JS中DOM元素的attribute与property属性示例详解
Sep 04 #Javascript
You might like
php.ini save_handler 修改不生效的解决办法
2014/07/22 PHP
php过滤html标记属性类用法实例
2014/09/23 PHP
PHP实现登陆并抓取微信列表中最新一组微信消息的方法
2017/07/10 PHP
Yii2框架实现登陆添加验证码功能示例
2018/07/12 PHP
JQuery与Ajax常用代码实现对比
2009/10/03 Javascript
jquery ready函数源代码研究
2009/12/06 Javascript
Jquery图形报表插件 jqplot简介及参数详解
2012/10/10 Javascript
Javascript中的getUTCDay()方法使用详解
2015/06/10 Javascript
学习JavaScript设计模式之享元模式
2016/01/18 Javascript
jQuery.ajax实现根据不同的Content-Type做出不同的响应
2016/11/03 Javascript
浅析上传头像示例及其注意事项
2016/12/14 Javascript
浅谈javascript的闭包
2017/01/23 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图的组合双轴图效果示例【附demo源码下载】
2017/03/09 Javascript
Angular.js ng-file-upload结合springMVC的使用教程
2017/07/10 Javascript
js 监控iframe URL的变化实例代码
2017/07/12 Javascript
[原创]jQuery实现合并/追加数组并去除重复项的方法
2018/04/11 jQuery
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
详解Vue2的diff算法
2021/01/06 Vue.js
[01:08]DOTA2次级职业联赛 - Wings 战队宣传片
2014/12/01 DOTA
python爬虫爬取淘宝商品信息
2018/02/23 Python
python使用magic模块进行文件类型识别方法
2018/12/08 Python
Python设计模式之状态模式原理与用法详解
2019/01/15 Python
Django在Model保存前记录日志实例
2020/05/14 Python
华为俄罗斯官方网上商城:购买Huawei手机和平板
2017/04/21 全球购物
意大利香水和彩妆护肤品购物网站:Ditano
2017/08/13 全球购物
丝芙兰加拿大官方网站:SEPHORA加拿大
2018/11/20 全球购物
德国药房apodiscounter中文官网:德国排名前三的网上药店
2019/06/03 全球购物
GAZMAN官网:澳大利亚领先的男装品牌
2019/12/19 全球购物
求职简历中的自我评价分享
2013/12/08 职场文书
党员培训思想汇报
2014/01/07 职场文书
最新结婚典礼主持词
2014/03/14 职场文书
工程学毕业生自荐信
2014/06/14 职场文书
中层干部培训方案
2014/06/16 职场文书
有限责任公司股东合作协议书
2014/12/02 职场文书
入党培养人考察意见
2015/06/08 职场文书
学生会任命书范本
2015/09/21 职场文书