在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 相关文章推荐
TinyMCE 新增本地图片上传功能
Nov 05 Javascript
JS获取月的最后一天与JS得到一个月份最大天数的实例代码
Dec 16 Javascript
Javascript实现鼠标右键特色菜单
Aug 04 Javascript
jQuery进行组件开发完整实例
Dec 15 Javascript
设计模式中的facade外观模式在JavaScript开发中的运用
May 18 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
Oct 28 Javascript
AngularJS学习笔记(三)数据双向绑定的简单实例
Nov 08 Javascript
vue权限路由实现的方法示例总结
Jul 29 Javascript
angular2 ng2-file-upload上传示例代码
Aug 23 Javascript
微信小程序使用canvas自适应屏幕画海报并保存图片功能
Jul 25 Javascript
在LayUI图片上传中,解决由跨域问题引起的请求接口错误的方法
Sep 24 Javascript
vue使用map代替Aarry数组循环遍历的方法
Apr 30 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
追忆往昔!浅谈收音机的百年发展历史
2021/03/01 无线电
简单谈谈PHP中的Reload操作
2016/12/12 PHP
PHP实现动态获取函数参数的方法示例
2018/04/02 PHP
PHP中将一个字符串部分字符用星号*替代隐藏的实现代码
2019/09/08 PHP
js实现按钮颜色渐变动画效果
2015/08/20 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
JS阻止事件冒泡行为和闭包的方法
2016/06/16 Javascript
使用JS中的exec()方法构造正则表达式验证
2016/08/01 Javascript
酷! 不同风格页面布局幻灯片特效js实现
2021/02/19 Javascript
多个vue子路由文件自动化合并的方法
2019/09/03 Javascript
el-table树形表格表单验证(列表生成序号)
2020/05/31 Javascript
解决echarts数据二次渲染不成功的问题
2020/07/20 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
Nodejs 微信小程序消息推送的实现
2021/01/20 NodeJs
为python设置socket代理的方法
2015/01/14 Python
python 多线程实现检测服务器在线情况
2015/11/25 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
Windows下安装python2和python3多版本教程
2017/03/30 Python
Python中is和==的区别详解
2018/11/15 Python
在PYQT5中QscrollArea(滚动条)的使用方法
2019/06/14 Python
python爬虫模块URL管理器模块用法解析
2020/02/03 Python
python中可以声明变量类型吗
2020/06/18 Python
2014年圣诞节倒计时网页的制作过程
2014/12/05 HTML / CSS
纪伊国屋泰国网上书店:Kinokuniya泰国
2017/12/24 全球购物
斯凯奇新西兰官网:SKECHERS新西兰
2018/02/22 全球购物
美国最大的船只买卖在线市场:Boat Trader
2018/08/04 全球购物
Foot Locker德国官方网站:美国运动服和鞋类零售商
2018/11/01 全球购物
Myprotein芬兰官网:欧洲第一运动营养品牌
2019/05/05 全球购物
Nike瑞士官网:Nike CH
2021/01/18 全球购物
医生进修自我鉴定
2014/01/19 职场文书
财务出纳岗位职责
2014/02/03 职场文书
优秀经理获奖感言
2014/03/04 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
PostGIS的安装与入门使用指南
2022/01/18 PostgreSQL
漫画《尖帽子的魔法工坊》宣布动画化
2022/04/06 日漫
教你如何用cmd快速登录服务器
2022/06/10 Servers