在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实现日历控件(年月日关闭按钮)
Dec 12 Javascript
利用JS来控制键盘的上下左右键(示例代码)
Dec 14 Javascript
js创建一个input数组并绑定click事件的方法
Jun 12 Javascript
jQuery简单几行代码实现tab切换
Mar 10 Javascript
JS三级可折叠菜单实现方法
Feb 29 Javascript
AngularJS 自定义指令详解及示例代码
Aug 17 Javascript
JS SetInterval 代码实现页面轮询
Aug 11 Javascript
jquery获取链接地址和跳转详解(推荐)
Aug 15 jQuery
JS实现利用两个队列表示一个栈的方法
Dec 13 Javascript
jquery实现掷骰子小游戏
Oct 24 jQuery
浅谈实现在线预览PDF的几种解决办法
Aug 10 Javascript
vue 导航锚点_点击平滑滚动,导航栏对应变化详解
Aug 10 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 网上商城促销设计实例代码
2012/02/17 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
php精确的统计在线人数的方法
2015/10/21 PHP
php用正则判断是否为数字的方法
2016/03/25 PHP
屏蔽PHP默认设置中的Notice警告的方法
2016/05/20 PHP
php操作xml并将其插入数据库的实现方法
2016/09/08 PHP
Laravel中的Blade模板引擎示例详解
2017/10/10 PHP
jQuery对表单元素的取值和赋值操作代码
2011/05/19 Javascript
jquery 获取标签名(tagName)示例代码
2013/07/11 Javascript
animate 实现滑动切换效果【实例代码】
2016/05/05 Javascript
详解javascript事件绑定使用方法
2016/10/20 Javascript
详解Javascript几种跨域方式总结
2017/02/27 Javascript
Vue Ajax跨域请求实例详解
2017/06/20 Javascript
浅谈Vue 初始化性能优化
2017/08/31 Javascript
vue router下的html5 history在iis服务器上的设置方法
2017/10/18 Javascript
使用javascript函数编写简单银行取钱存钱流程
2018/05/26 Javascript
React SSR样式及SEO的实践
2018/10/22 Javascript
vue动态绑定class的几种常用方式小结
2019/05/21 Javascript
jquery操作checkbox的常用方法总结【附测试源码下载】
2019/06/10 jQuery
Vue通过for循环随机生成不同的颜色或随机数的实例
2019/11/09 Javascript
JavaScript图片旋转效果实现方法详解
2020/06/28 Javascript
python脚本内运行linux命令的方法
2015/07/02 Python
python3+PyQt5实现使用剪贴板做复制与粘帖示例
2017/01/24 Python
Python3编码问题 Unicode utf-8 bytes互转方法
2018/10/26 Python
Django通用类视图实现忘记密码重置密码功能示例
2019/12/17 Python
python 读取更新中的log 或其它文本方式
2019/12/24 Python
德国汽车零件和汽车配件网上商店:kfzteile24
2018/11/14 全球购物
SQL语言面试题
2013/08/27 面试题
应届电子商务毕业自荐书范文
2014/02/11 职场文书
运动会演讲稿50字
2014/08/25 职场文书
入股协议书范本
2014/11/01 职场文书
新年晚会主持词开场白
2015/05/28 职场文书
倡议书怎么写?
2019/04/11 职场文书
HTML+CSS 实现顶部导航栏菜单制作
2021/06/03 HTML / CSS
《废话连篇——致新手》——chinapizza
2022/04/05 无线电