在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针对DOM的应用分析(四)
Apr 15 Javascript
JavaScript 常见安全漏洞和自动化检测技术
Aug 21 Javascript
Winform客户端向web地址传参接收参数的方法
May 17 Javascript
js实现楼层导航功能
Feb 23 Javascript
vue轮播图插件vue-awesome-swiper
Nov 27 Javascript
微信小程序实现下载进度条的方法
Dec 08 Javascript
vue 弹框产生的滚动穿透问题的解决
Sep 21 Javascript
JS 音频可视化插件Wavesurfer.js的使用教程
Oct 31 Javascript
Vue项目中如何使用Axios封装http请求详解
Oct 23 Javascript
在微信小程序中渲染HTML内容3种解决方案及分析与问题解决
Jan 12 Javascript
Angular之jwt令牌身份验证的实现
Feb 14 Javascript
利用webpack理解CommonJS和ES Modules的差异区别
Jun 16 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
一个从别的网站抓取信息的例子(域名查询)
2006/10/09 PHP
PHP+jQuery实现自动补全功能源码
2013/05/15 PHP
PHP读取mssql json数据中文乱码的解决办法
2016/04/11 PHP
javascript的事件描述
2006/09/08 Javascript
许愿墙中用到的函数
2006/10/07 Javascript
ext form 表单提交数据的方法小结
2008/08/08 Javascript
jQuery温习篇 强大的JQuery选择器
2010/04/24 Javascript
js实现动态添加、删除行、onkeyup表格求和示例
2013/08/18 Javascript
页面元素绑定jquery toggle后元素隐藏的解决方法
2014/03/27 Javascript
深入理解JavaScript编程中的同步与异步机制
2015/06/24 Javascript
jQuery EasyUI 菜单与按钮之创建简单的菜单和链接按钮
2015/11/18 Javascript
jQuery基于cookie实现的购物车实例分析
2015/12/24 Javascript
xmlplus组件设计系列之下拉刷新(PullRefresh)(6)
2017/05/03 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
浅析vue.js数组的变异方法
2018/06/30 Javascript
bootstrap动态调用select下拉框的实例代码
2018/08/09 Javascript
加快Vue项目的开发速度的方法
2018/12/12 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
vue模式history下在iis中配置流程
2019/04/17 Javascript
javascript设计模式 ? 命令模式原理与用法实例分析
2020/04/20 Javascript
vue-router定义元信息meta操作
2020/12/07 Vue.js
[01:19:35]DOTA2上海特级锦标赛主赛事日 - 3 败者组第三轮#2Fnatic VS OG第二局
2016/03/05 DOTA
python+selenium实现登录账户后自动点击的示例
2017/12/22 Python
Python实现的端口扫描功能示例
2018/04/08 Python
django1.11.1 models 数据库同步方法
2018/05/30 Python
对pandas处理json数据的方法详解
2019/02/08 Python
python打开windows应用程序的实例
2019/06/28 Python
Pycharm中使用git进行合作开发的教程详解
2020/11/17 Python
canvas三角函数模拟水波效果的示例代码
2018/07/03 HTML / CSS
html5弹跳球示例代码
2013/07/23 HTML / CSS
文体活动总结范文
2014/05/05 职场文书
会计求职自荐信
2014/06/20 职场文书
村主任群众路线教育实践活动个人对照检查材料思想汇报
2014/10/01 职场文书
golang 实现两个结构体复制字段
2021/04/28 Golang
动态规划之使用备忘录来改进Javascript函数
2022/04/07 Javascript
MySQL数据库之存储过程 procedure
2022/06/16 MySQL