在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 效率组装字符串 StringBuffer
Dec 23 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
node.js中的fs.chown方法使用说明
Dec 16 Javascript
javascript使用switch case实现动态改变超级链接文字及地址
Dec 16 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
Apr 15 Javascript
JavaScript模拟可展开、拖动与关闭的聊天窗口实例
May 12 Javascript
jQuery的Scrollify插件实现滑动到页面下一节点
Jul 05 Javascript
Bootstrap每天必学之弹出框(Popover)插件
Apr 25 Javascript
基于jquery实现最简单的选项卡切换效果
May 08 Javascript
js微信分享实现代码
Oct 11 Javascript
解决Layui选择全部,换页checkbox复选框重新勾选的问题方法
Aug 14 Javascript
vue实现数字滚动效果
Jun 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
PHP过滤★等特殊符号的正则
2014/01/27 PHP
对PHP新手的一些建议(PHP学习经验总结)
2014/08/20 PHP
PHP递归实现层级树状展开
2016/04/01 PHP
PHP利用正则表达式将相对路径转成绝对路径的方法示例
2017/02/28 PHP
在laravel框架中实现封装公共方法全局调用
2019/10/14 PHP
TextArea 控件的最大长度问题(js json)
2009/12/16 Javascript
JavaScript和JQuery实用代码片段(一)
2010/04/07 Javascript
Javascript事件热键兼容ie|firefox
2010/12/30 Javascript
javascript实现tabs选项卡切换效果(自写原生js)
2013/03/19 Javascript
12种不宜使用的Javascript语法整理
2013/11/04 Javascript
js利用事件的阻止冒泡实现点击空白模态框的隐藏
2014/01/24 Javascript
当前流行的JavaScript代码风格指南
2014/09/10 Javascript
简化版手机端照片预览组件
2015/04/13 Javascript
原生js与jQuery实现简单的tab切换特效对比
2015/07/30 Javascript
JavaScript实现仿新浪微博大厅和腾讯微博首页滚动特效源码
2015/09/15 Javascript
JavaScript Math 对象常用方法总结
2016/04/28 Javascript
javascript判断图片是否加载完成的方法推荐
2016/05/13 Javascript
解决nodejs中使用http请求返回值为html时乱码的问题
2017/02/18 NodeJs
Avalonjs双向数据绑定与监听的实例代码
2017/06/23 Javascript
Javascript es7中比较实用的两个方法示例
2017/07/21 Javascript
JavaScript生成指定范围的时间列表
2018/03/19 Javascript
Vue实现本地购物车功能
2018/12/05 Javascript
详解angular2 控制视图的封装模式
2018/12/27 Javascript
微信小程序-form表单提交代码实例
2019/04/29 Javascript
JS根据json数组多个字段排序及json数组常用操作
2019/06/06 Javascript
Python实现判断一个字符串是否包含子串的方法总结
2017/11/21 Python
python+selenium 定位到元素,无法点击的解决方法
2019/01/30 Python
Django高级编程之自定义Field实现多语言
2019/07/02 Python
python 实现12bit灰度图像映射到8bit显示的方法
2019/07/08 Python
selenium 多窗口切换的实现(windows)
2020/01/18 Python
WINDOWS域的具体实现方式是什么
2014/02/20 面试题
《晚上的太阳》教学反思
2014/04/23 职场文书
大学生应聘导游自荐信
2014/06/02 职场文书
诉讼授权委托书
2014/10/15 职场文书
只用40行Python代码就能写出pdf转word小工具
2021/05/31 Python
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers