在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 相关文章推荐
js为鼠标添加右击事件防止默认的右击菜单弹出
Jul 29 Javascript
javascript(js)的小数点乘法除法问题详解
Mar 07 Javascript
jQuery实用技巧必备(上)
Nov 02 Javascript
jQuery旋转木马式幻灯片轮播特效
Dec 04 Javascript
JQuery ztree带筛选、异步加载实例讲解
Feb 25 Javascript
JS使用tofixed与round处理数据四舍五入的区别
Oct 25 Javascript
关于Vue的路由权限管理的示例代码
Mar 06 Javascript
Vue-Router的使用方法
Sep 05 Javascript
小程序getLocation需要在app.json中声明permission字段
Apr 04 Javascript
使用JavaScript实现网页秒表功能(含开始、暂停、继续、重置功能)
Jun 05 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
Vue实现移动端拖拽交换位置
Jul 29 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
无法载入 mcrypt 扩展,请检查 PHP 配置终极解决方案
2011/07/18 PHP
浅析Yii2中GridView常见操作
2016/04/22 PHP
微信支付开发交易通知实例
2016/07/12 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
Javascript 圆角div的实现代码
2009/10/15 Javascript
javascript对数组的常用操作代码 数组方法总汇
2011/01/27 Javascript
Jquery和JS用外部变量获取Ajax返回的参数值的方法实例(超简单)
2013/06/17 Javascript
浅析LigerUi开发中谨慎载入common.css文件
2013/07/09 Javascript
jquery禁用右键示例
2014/04/28 Javascript
JQuery调用WebServices的方法和4个实例
2014/05/06 Javascript
跟我学Nodejs(三)--- Node.js模块
2014/05/25 NodeJs
AngularJS 让人爱不释手的八种功能
2016/03/23 Javascript
ReactNative页面跳转实例代码
2016/09/27 Javascript
js 性能优化之算法和流程控制
2017/02/15 Javascript
jQuery插件HighCharts绘制2D柱状图、折线图和饼图的组合图效果示例【附demo源码下载】
2017/03/09 Javascript
vue.js根据代码运行环境选择baseurl的方法
2018/02/28 Javascript
vue中vee validate表单校验的几种基本使用
2018/06/25 Javascript
微信小程序开发之tabbar图标和颜色的实现
2018/10/17 Javascript
详解javascript函数写法大全
2019/03/25 Javascript
基于JS实现一个随机生成验证码功能
2019/05/29 Javascript
分析Python编程时利用wxPython来支持多线程的方法
2015/04/07 Python
Python实现桶排序与快速排序算法结合应用示例
2017/11/22 Python
详解python中的装饰器
2018/07/10 Python
Python使用pyautogui模块实现自动化鼠标和键盘操作示例
2018/09/04 Python
Python爬虫如何应对Cloudflare邮箱加密
2020/06/24 Python
Keras保存模型并载入模型继续训练的实现
2021/02/20 Python
拓展培训心得体会
2014/01/04 职场文书
春节活动策划方案
2014/01/24 职场文书
模具专业毕业推荐信
2014/03/08 职场文书
五一活动标语
2014/06/30 职场文书
新郎婚礼答谢词
2015/01/04 职场文书
2015年教师工作总结范文
2015/03/31 职场文书
优秀员工演讲稿
2019/06/21 职场文书
详解MySQL中的主键与事务
2021/05/27 MySQL
MySQL之MyISAM存储引擎的非聚簇索引详解
2022/03/03 MySQL
Java后端 Dubbo retries 超时重试机制的解决方案
2022/04/14 Java/Android