在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 相关文章推荐
在一个form用一个SUBMIT(或button)分别提交到两个处理表单页面的代码
Feb 15 Javascript
jQuery对象和DOM对象相互转化
Apr 24 Javascript
javascript中的throttle和debounce浅析
Jun 06 Javascript
jQuery跨域问题解决方案
Aug 03 Javascript
JS实现网站菜单拖拽移位效果的方法
Sep 24 Javascript
jquery 全选、全不选、反选效果的实现代码【推荐】
May 05 Javascript
js对字符串进行编码的方法总结(推荐)
Nov 10 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
Vuex之理解state的用法实例
Apr 19 Javascript
p5.js入门教程之图片加载
Mar 20 Javascript
详解单页面路由工程使用微信分享及二次分享解决方案
Feb 22 Javascript
js实现验证码功能
Jul 24 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简单实现DES加密解密的方法
2016/07/12 PHP
JavaScript replace(rgExp,fn)正则替换的用法
2010/03/04 Javascript
jquery 图片截取工具jquery.imagecropper.js
2010/04/09 Javascript
formValidator3.3的ajaxValidator一些异常分析
2011/07/12 Javascript
自己动手制作jquery插件之自动添加删除行功能介绍
2011/10/14 Javascript
网页编辑器ckeditor和ckfinder配置步骤分享
2012/05/24 Javascript
js之onload事件的一点使用心得
2013/08/14 Javascript
利用jquery.qrcode在页面上生成二维码且支持中文
2014/02/12 Javascript
angularjs 处理多个异步请求方法汇总
2015/01/06 Javascript
js实现从数组里随机获取元素
2015/01/12 Javascript
jQuery中inArray方法注意事项分析
2016/01/25 Javascript
JS实现的表格行上下移动操作示例
2016/08/03 Javascript
Bootstrap常用组件学习(整理)
2017/03/24 Javascript
vue v-model表单控件绑定详解
2017/05/17 Javascript
vue+ElementUI 关闭对话框清空验证,清除form表单的操作
2020/08/06 Javascript
微信小程序实现翻牌抽奖动画
2020/09/21 Javascript
Javascript异步流程控制之串行执行详解
2020/09/27 Javascript
Python Queue模块详细介绍及实例
2016/12/27 Python
Python lambda函数基本用法实例分析
2018/03/16 Python
Python-OpenCV基本操作方法详解
2018/04/02 Python
画pytorch模型图,以及参数计算的方法
2019/08/17 Python
Python3查找列表中重复元素的个数的3种方法详解
2020/02/13 Python
使用TFRecord存取多个数据案例
2020/02/17 Python
奥兰多迪士尼门票折扣:Undercover Tourist
2018/07/09 全球购物
银行会计职员个人的自我评价
2013/09/29 职场文书
酒店公关部经理岗位职责
2013/11/24 职场文书
计算机专业毕业生推荐信
2013/11/25 职场文书
餐饮企业总经理岗位职责范文
2014/02/18 职场文书
QQ空间主人寄语大全
2014/04/12 职场文书
副职竞争上岗演讲稿
2014/05/12 职场文书
社区工作者演讲稿
2014/05/23 职场文书
世界卫生日宣传活动总结
2015/02/09 职场文书
2016党员发展对象培训心得体会
2016/01/08 职场文书
创业计划书之儿童理发店
2019/09/27 职场文书
Spring Boot 排除某个类加载注入IOC的操作
2021/08/02 Java/Android
详解python的异常捕获
2022/03/03 Python