在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 相关文章推荐
showModalDialog 和 showModelessDialog
Jan 22 Javascript
document.designMode的功能与使用方法介绍
Nov 22 Javascript
理解Javascript_07_理解instanceof实现原理
Oct 15 Javascript
js三种排序算法分享
Aug 16 Javascript
JS自动倒计时30秒后按钮才可用(两种场景)
Aug 31 Javascript
浅谈JavaScript对象与继承
Jul 10 Javascript
JS实现直接运行html代码的方法
Mar 13 Javascript
基于vue-simplemde实现图片拖拽、粘贴功能
Apr 12 Javascript
基于vue.js组件实现分页效果
Dec 29 Javascript
vue插槽slot的理解和使用方法
Apr 03 Javascript
vue router 用户登陆功能的实例代码
Apr 24 Javascript
layui输入框只允许输入中文且判断长度的例子
Sep 18 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
thinkPHP中分页用法实例分析
2015/12/26 PHP
PHP中ID设置自增后不连续的原因分析及解决办法
2016/08/21 PHP
PHP静态成员变量和非静态成员变量详解
2017/02/14 PHP
php array_reverse 以相反的顺序返回数组实例代码
2017/04/11 PHP
jQueryUI如何自定义组件实现代码
2010/11/14 Javascript
JavaScript.The.Good.Parts阅读笔记(二)作用域&闭包&减缓全局空间污染
2010/11/16 Javascript
原生js写的放大镜效果
2012/08/22 Javascript
js日期、星座的级联显示代码
2014/01/23 Javascript
正则表达式基本语法及表单验证操作详解【基于JS】
2017/04/07 Javascript
jQuery中each循环的跳出和结束实例
2017/08/16 jQuery
微信小程序实现日历效果
2018/12/28 Javascript
VueJS实现用户管理系统
2020/05/29 Javascript
vue如何使用外部特殊字体的操作
2020/07/30 Javascript
Python实现获取网站PR及百度权重
2015/01/21 Python
全面了解Python环境配置及项目建立
2016/06/30 Python
Python实现简单的HttpServer服务器示例
2017/09/25 Python
python3.x 将byte转成字符串的方法
2018/07/17 Python
Python Web编程之WSGI协议简介
2018/07/18 Python
Django项目使用CircleCI的方法示例
2019/07/14 Python
python正则表达式匹配不包含某几个字符的字符串方法
2019/07/23 Python
django实现用户注册实例讲解
2019/10/30 Python
Python3如何判断三角形的类型
2020/04/12 Python
Python+OpenCV图像处理——图像二值化的实现
2020/10/24 Python
pytorch Dataset,DataLoader产生自定义的训练数据案例
2021/03/03 Python
使用phonegap获取位置信息的实现方法
2017/03/31 HTML / CSS
Hotels.com印度:酒店预订
2019/05/11 全球购物
广播电视新闻学专业应届生求职信
2013/10/08 职场文书
《社戏》教学反思
2014/04/15 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
出差报告格式模板
2014/11/06 职场文书
圣诞节开幕词
2015/01/29 职场文书
毕业设计答辩开场白
2015/05/29 职场文书
2016年社区服务活动总结
2016/04/06 职场文书
神州牡丹园的导游词
2019/11/20 职场文书
win10频率超出范围怎么办?win10老显示超出工作频率范围的解决方法
2022/07/07 数码科技
Java实现超大Excel文件解析(XSSF,SXSSF,easyExcel)
2022/07/15 Java/Android