在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 10 Javascript
解析使用JS 清空File控件的路径值
Jul 08 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
node.js中的fs.ftruncate方法使用说明
Dec 15 Javascript
javascript实现html页面之间参数传递的四种方法实例分析
Dec 15 Javascript
BootStrap智能表单实战系列(九)表单图片上传的支持
Jun 13 Javascript
jQuery实现打开页面渐现效果示例
Jul 27 Javascript
js实现手机发送验证码功能
Mar 13 Javascript
基于JavaScript实现移动端无限加载分页
Mar 27 Javascript
浅谈Angular 的变化检测的方法
Mar 01 Javascript
JavaScript常用事件介绍
Jan 21 Javascript
基于elementUI竖向表格、和并列的案例
Oct 26 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
PHP4实际应用经验篇(1)
2006/10/09 PHP
你可能不知道PHP get_meta_tags()函数
2014/05/12 PHP
PHPStorm+XDebug进行调试图文教程
2016/06/13 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
js cookies 常见网页木马挂马代码 24小时只加载一次
2009/04/13 Javascript
JS去掉第一个字符和最后一个字符的实现代码
2014/02/20 Javascript
JavaScript使用Prototype实现面向对象的方法
2015/04/14 Javascript
JS+CSS实现的竖向简洁折叠菜单效果代码
2015/10/22 Javascript
基于javascript实现精确到毫秒的倒计时限时抢购
2016/04/17 Javascript
如何写好你的JavaScript【推荐】
2017/03/02 Javascript
详解vue中computed 和 watch的异同
2017/06/30 Javascript
JavaScript实现简单评论功能
2017/08/17 Javascript
bootstrap multiselect下拉列表功能
2017/08/22 Javascript
vue Element-ui input 远程搜索与修改建议显示模版的示例代码
2017/10/19 Javascript
JS实现调用本地摄像头功能示例
2018/05/18 Javascript
jQuery HTML获取内容和属性操作实例分析
2020/05/20 jQuery
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
python中from module import * 的一个坑
2014/07/20 Python
Python中捕捉详细异常信息的代码示例
2014/09/18 Python
Python中的__SLOTS__属性使用示例
2015/02/18 Python
CentOS 7下Python 2.7升级至Python3.6.1的实战教程
2017/07/06 Python
python requests 使用快速入门
2017/08/31 Python
简单了解Django模板的使用
2017/12/20 Python
书单|人生苦短,你还不用python!
2017/12/29 Python
python3 字符串/列表/元组(str/list/tuple)相互转换方法及join()函数的使用
2019/04/03 Python
使用Tensorboard工具查看Loss损失率
2020/02/15 Python
python hmac模块验证客户端的合法性
2020/11/07 Python
我们在web应用开发过程中经常遇到输出某种编码的字符,如iso8859-1等,如何输出一个某种编码的字符串?
2014/03/30 面试题
幼儿园中班上学期评语
2014/04/18 职场文书
《特殊的葬礼》教学反思
2014/04/27 职场文书
企业法人代表任命书
2014/06/06 职场文书
三八妇女节标语
2014/10/09 职场文书
2014社会治安综合治理工作总结
2014/12/04 职场文书
2015试用期转正工作总结
2014/12/12 职场文书
慰问信范文
2015/02/14 职场文书
2016教师政治学习心得体会
2016/01/23 职场文书