在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 相关文章推荐
文字幻灯片
Jun 26 Javascript
一个tab标签切换效果代码
Mar 27 Javascript
location.href用法总结(最主要的)
Dec 27 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
自定义刻度jQuery进度条及插件
Sep 02 Javascript
jQuery控制DIV层实现由大到小,由远及近动画变化效果
Oct 09 Javascript
基于JavaScript实现仿京东图片轮播效果
Nov 06 Javascript
javascript伸缩菜单栏实现代码分享
Nov 12 Javascript
详解动画插件wow.js的使用方法
Sep 13 Javascript
jQuery选择器之表单元素选择器详解
Sep 19 jQuery
vue js秒转天数小时分钟秒的实例代码
Aug 08 Javascript
vue 实现在同一界面实现组件的动态添加和删除功能
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
PHP发明人谈MVC和网站设计架构 貌似他不支持php用mvc
2011/06/04 PHP
成为好程序员必须避免的5个坏习惯
2014/07/04 PHP
帝国cms常用标签汇总
2015/07/06 PHP
thinkPHP5.0框架整体架构总览【应用,模块,MVC,驱动,行为,命名空间等】
2017/03/25 PHP
PHP实现更改hosts文件的方法示例
2017/08/08 PHP
利用javascript查看html源文件
2006/11/08 Javascript
jQuery1.3.2 升级到jQuery1.4.4需要修改的地方
2011/01/06 Javascript
JavaScript实现N皇后问题算法谜题解答
2014/12/29 Javascript
jQuery插件zoom实现图片全屏放大弹出层特效
2015/04/15 Javascript
TypeScript 学习笔记之基本类型
2015/06/19 Javascript
关于验证码在IE中不刷新的快速解决方法
2016/09/23 Javascript
微信小程序onLaunch异步,首页onLoad先执行?
2018/09/20 Javascript
vue 音乐App QQ音乐搜索列表最新接口跨域设置方法
2018/09/25 Javascript
浅析微信扫码登录原理(小结)
2018/10/29 Javascript
Vue CL3 配置路径别名详解
2019/05/30 Javascript
简述Vue中容易被忽视的知识点
2019/12/09 Javascript
vue中使用echarts的示例
2021/01/03 Vue.js
[01:18:33]Secret vs VGJ.S Supermajor小组赛C组 BO3 第一场 6.3
2018/06/04 DOTA
[01:14:19]NAVI vs Mineski 2019国际邀请赛淘汰赛 败者组BO1 8.20.mp4
2020/07/19 DOTA
Python实现全角半角转换的方法
2014/08/18 Python
Python3.2中Print函数用法实例详解
2015/05/19 Python
python统计文本字符串里单词出现频率的方法
2015/05/26 Python
python交换两个变量的值方法
2019/01/12 Python
python mqtt 客户端的实现代码实例
2019/09/25 Python
Python如何对齐字符串
2020/07/30 Python
Python制作运行进度条的实现效果(代码运行不无聊)
2021/02/24 Python
Lookfantastic挪威官网:英国知名美妆购物网站
2017/07/26 全球购物
英国拳击装备购物网站:RDX Sports
2018/01/23 全球购物
澳洲的服装老品牌:SABA
2018/02/06 全球购物
Internet主要有哪些网络群组成
2015/12/24 面试题
EJB的激活机制
2013/10/25 面试题
获奖的大学生创业计划书
2014/01/05 职场文书
新闻发布会策划方案
2014/06/12 职场文书
工程款申请报告
2015/05/15 职场文书
导游词之阳朔遇龙河
2019/12/16 职场文书
Mysql 一主多从的部署
2022/05/20 MySQL