在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 汉字字节判断
Aug 01 Javascript
Javascript 面向对象 重载
May 13 Javascript
手写的一个兼容各种浏览器的javascript getStyle函数(获取元素的样式)
Jun 06 Javascript
js实现div弹出层的方法
Nov 20 Javascript
在线所见即所得HTML编辑器的实现原理浅析
Apr 25 Javascript
Jquery注册事件实现方法
May 18 Javascript
Ionic 2 实现列表滑动删除按钮的方法
Jan 22 Javascript
javascript笔记之匿名函数和闭包
Feb 06 Javascript
echarts鼠标覆盖高亮显示节点及关系名称详解
Mar 17 Javascript
微信小程序实现动态获取元素宽高的方法分析
Dec 10 Javascript
微信小程序中data-key属性之数据传输(经验总结)
Aug 22 Javascript
Vue 列表页带参数进详情页的操作(router-link)
Nov 13 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继承的一个应用
2011/09/06 PHP
javascript写的一个链表实现代码
2009/10/25 Javascript
JavaScript中的闭包原理分析
2010/03/08 Javascript
一次失败的jQuery优化尝试小结
2011/02/06 Javascript
iframe的onload在Chrome/Opera中执行两次Bug的解决方法
2011/03/17 Javascript
jQuery Tools tab使用介绍
2012/07/14 Javascript
javascript闭包的高级使用方法实例
2013/07/04 Javascript
随鼠标移动的时钟非常漂亮遗憾的是只支持IE
2014/08/12 Javascript
js+div实现文字滚动和图片切换效果代码
2015/08/27 Javascript
Backbone.js框架中Model与Collection的使用实例
2016/05/07 Javascript
深入浅出ES6新特性之函数默认参数和箭头函数
2016/08/01 Javascript
老生常谈JQuery data方法的使用
2016/09/09 Javascript
纯JS实现轮播图
2017/02/22 Javascript
vuex学习之Actions的用法详解
2017/08/29 Javascript
Js利用prototype自定义数组方法示例
2017/10/20 Javascript
如何优雅的在一台vps(云主机)上面部署vue+mongodb+express项目
2019/01/20 Javascript
新年快乐! javascript实现超级炫酷的3D烟花特效
2019/01/30 Javascript
node.js中express模块创建服务器和http模块客户端发请求
2019/03/06 Javascript
Vee-validate 父组件获取子组件表单校验结果的实例代码
2019/05/20 Javascript
详解关闭令人抓狂的ESlint 语法检测配置方法
2019/10/28 Javascript
vue 中几种传值方法(3种)
2019/11/12 Javascript
vue图片裁剪插件vue-cropper使用方法详解
2020/12/16 Vue.js
python指定写入文件时的编码格式方法
2018/06/07 Python
对Tensorflow中的矩阵运算函数详解
2018/07/27 Python
python 解压pkl文件的方法
2018/10/25 Python
Python字典的基本用法实例分析【创建、增加、获取、修改、删除】
2019/03/05 Python
Python可变和不可变、类的私有属性实例分析
2019/05/31 Python
Python如何应用cx_Oracle获取oracle中的clob字段问题
2019/08/27 Python
Python计算IV值的示例讲解
2020/02/28 Python
CSS3 不定高宽垂直水平居中的几种方式
2020/03/26 HTML / CSS
浅析canvas元素的html尺寸和css尺寸对元素视觉的影响
2019/07/22 HTML / CSS
《老王》教学反思
2014/02/23 职场文书
班干部演讲稿
2014/04/24 职场文书
爸爸的三轮车观后感
2015/06/16 职场文书
导游词之崇武古城
2019/10/07 职场文书
MySQL数字类型自增的坑
2021/05/07 MySQL