在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 相关文章推荐
Javascript----文件操作
Jan 18 Javascript
jQuery示例收集
Nov 05 Javascript
js获取RadioButtonList的Value/Text及选中值等信息实现代码
Mar 05 Javascript
jQuery中关于ScrollableGridPlugin.js(固定表头)插件的使用逐步解析
Jul 17 Javascript
一个很有趣3D球状标签云兼容IE8
Aug 22 Javascript
jquery选择器简述
Aug 31 Javascript
Javascript技术栈中的四种依赖注入小结
Feb 27 Javascript
详解微信小程序 template添加绑定事件
Jun 23 Javascript
详解vue.js数据传递以及数据分发slot
Jan 20 Javascript
vue实现移动端轻量日期组件不依赖第三方库的方法
Apr 28 Javascript
微信小程序自定义头部导航栏和导航栏背景图片 navigationStyle问题
Jul 26 Javascript
node.js基于dgram数据报模块创建UDP服务器和客户端操作示例
Feb 12 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 str_replace的替换漏洞
2008/03/15 PHP
php学习之流程控制实现代码
2011/06/09 PHP
php购物车实现代码
2011/10/10 PHP
使用PHP会话(Session)实现用户登陆功能
2013/06/29 PHP
PHP实现仿Google分页效果的分页函数
2015/07/29 PHP
php版微信小店调用api示例代码
2016/11/12 PHP
PHP操作redis实现的分页列表,新增,删除功能封装类与用法示例
2018/08/04 PHP
php对象工厂类完整示例
2018/08/09 PHP
php测试kafka项目示例
2020/02/06 PHP
一个获取第n个元素节点的js函数
2014/09/02 Javascript
轻松创建nodejs服务器(2):nodejs服务器的构成分析
2014/12/18 NodeJs
javascript和jquery实现设置和移除文本框默认值效果代码
2015/01/13 Javascript
深入理解JavaScript中的对象
2015/06/04 Javascript
jquery中的工具使用方法$.isFunction, $.isArray(), $.isWindow()
2015/08/09 Javascript
JS中页面与页面之间超链接跳转中文乱码问题的解决办法
2016/12/15 Javascript
JavaScript数据结构之二叉树的遍历算法示例
2017/04/13 Javascript
基于React Native 0.52实现轮播图效果
2020/08/25 Javascript
小程序封装路由文件和路由方法(5种全解析)
2019/05/26 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
Python编程之序列操作实例详解
2017/07/22 Python
python实现list由于numpy array的转换
2018/04/04 Python
Python实现的爬取网易动态评论操作示例
2018/06/06 Python
Django接收post前端返回的json格式数据代码实现
2019/07/31 Python
5款实用的python 工具推荐
2020/10/13 Python
女装和独特珠宝:Sundance Catalog
2018/09/19 全球购物
澳大利亚一站式数码相机商店:CameraPro
2020/03/09 全球购物
中医药大学市场营销专业自荐信
2013/09/29 职场文书
yy生日主持词
2014/03/20 职场文书
高三家长寄语
2014/04/03 职场文书
党员干部廉洁承诺书
2014/05/28 职场文书
弘扬焦裕禄精神走群众路线思想汇报
2014/09/12 职场文书
2014年外贸业务员工作总结
2014/12/11 职场文书
信贷客户经理岗位职责
2015/04/09 职场文书
化工厂员工工作总结
2015/10/15 职场文书
2016新教师岗前培训心得体会
2016/01/08 职场文书
vue-cropper组件实现图片切割上传
2021/05/27 Vue.js