在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

在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)的方法及不同方法的比较，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！

赞 (0)

相关推荐

  • AngularJS实现ajax请求的方法

    本文实例讲述了AngularJS实现ajax请求的方法.分享给大家供大家参考,具体如下: [HTML 代码] <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width,user-scalable=no, initial-scale=1"> &

  • 详解AngularJS中$http缓存以及处理多个$http请求的方法

    $http 是 AngularJS 中的一个核心服务,用于读取远程服务器的数据.在AngularJS的实际项目中,经常需要处理多个$http请求,每个$http请求返回一个promise,我们可以把多个promise放到$q.all()方法接受的一个数组实参中去. 1.处理多个$http请求 angular.module('app',[]) .controller('AppCtrl', function AppCtrl(myService){ var app = this; myService.

  • AngularJS出现$http异步后台无法获取请求参数问题的解决方法

    本文实例讲述了AngularJS出现$http异步后台无法获取请求参数问题的解决方法.分享给大家供大家参考,具体如下: angular在通过异步提交数据时使用了与jQuery不一样的请求头部和数据序列化方式,导致部分后台程序无法正常解析数据. 原理分析(网上的分析): 对于AJAX应用(使用XMLHttpRequests)来说,向服务器发起请求的传统方式是:获取一个XMLHttpRequest对象的引用.发起请求.读取响应.检查状态码,最后处理服务端的响应.整个过程示例如下: var xmlht

  • 解析AngularJS中get请求URL出现的跨域问题

    解析AngularJS中get请求URL出现的跨域问题

    今天早上帮助同学看了一个AngularJS的问题,主要是请求中出现了跨域访问,请求被阻止. 下面是她给我的代码: <html lang="en" ng-app="myApp"> <head> <meta charset="UTF-8"> <title>Title</title> <!--<script src="../js/jquery-1.11.0.js"

  • 详解AngularJS如何实现跨域请求

    跨域,前端开发中经常遇到的问题,AngularJS实现跨域方式类似于Ajax,使用CORS机制. 下面阐述一下AngularJS中使用$http实现跨域请求数据. AngularJS XMLHttpRequest:$http用于读取远程服务器的数据 $http.post(url, data, [config]).success(function(){ ... }); $http.get(url, [config]).success(function(){ ... }); $http.get(ur

  • Angularjs中$http以post请求通过消息体传递参数的实现方法

    本文实例讲述了Angularjs中$http以post请求通过消息体传递参数的方法.分享给大家供大家参考,具体如下: Angularjs中,$http以post在消息体中传递参数,需要做以下修改,以确保消息体传递参数的正确性. 一.在声明应用的时候进行设置: var httpPost = function($httpProvider) { /******************************************* 说明:$http的post提交时,纠正消息体 ***********

  • angularjs 处理多个异步请求方法汇总

    在实际业务中经常需要等待几个请求完成后再进行下一步操作.但angularjs中$http不支持同步的请求. 解决方法一: 复制代码 代码如下: $http.get('url1').success(function (d1) {         $http.get('url2').success(function (d2) {             //处理逻辑         });     }); 解决方法二: then中的方法会按顺序执行. 复制代码 代码如下: var app = ang

  • 在AngularJs中设置请求头信息(headers)的方法及不同方法的比较

    在AngularJs中有三种方式可以设置请求头信息: 1.在http服务的在服务端发送请求时,也就是调用 http服务的在服务端发送请求时,也就是调用 http()方法时,在config对象中设置请求头信息:事例如下: $http.post('/somePath' , someData , { headers : {'Authorization' : authToken} }).success(function(data, status, headers, config) { //... }).

  • vue-resouce设置请求头的三种方法

    本文主要介绍了vue-resouce设置请求头的三种方法,分享给大家,具体如下: 第一种:在Vue实例中设置 var vm = new Vue({ el:'#rrapp', data:{ showList: true, title: null }, http: { root: '/', headers: { token: token } } }) 第二种:全局设置请求头 Vue.http.headers.common['token'] = 'YXBpOnBhc3N3b3Jk'; 第三种:在拦截器

  • Django Python 获取请求头信息Content-Range的方法

    request请求头信息的键会加上HTTP_转换成大写存到request.META中 因此你只需要 content_range = request.META['HTTP_CONTENT_RANGE'] 这样就可以获取到Content-Range的信息. django官网的解释: A standard Python dictionary containing all available HTTP headers. Available headers depend on the client and

  • php的curl携带header请求头信息实现http访问的方法

    php的curl携带header请求头信息实现http访问的方法

    导读: curl请求时添加请求头信息可以模拟真人操作,不容易被当成是爬虫机器人(采集),从而可以绕过Incapsula等安全验证机制. 1.首先使用浏览器(示例使用的是火狐浏览器)访问接口网址,使用F12调试,查看请求头信息,如下: 2.实现代码: <?php /** * 开始访问请求 * @param $url * @return bool|string */ function fetch_url($url) { $header = FormatHeader($url); $useragent

  • Pytho爬虫中Requests设置请求头Headers的方法

    1.为什么要设置headers? 在请求网页爬取的时候,输出的text信息中会出现抱歉,无法访问等字眼,这就是禁止爬取,需要通过反爬机制去解决这个问题. headers是解决requests请求反爬的方法之一,相当于我们进去这个网页的服务器本身,假装自己本身在爬取数据. 对反爬虫网页,可以设置一些headers信息,模拟成浏览器取访问网站 . 2. headers在哪里找? 谷歌或者火狐浏览器,在网页面上点击:右键–>检查–>剩余按照图中显示操作,需要按Fn+F5刷新出网页来 有的浏览器是点击

  • jQuery在header中设置请求信息的方法

    jquery是js的类库,js本身不能操作header,因为js是在浏览器加载页面过程中才开始执行的header需要服务器端执行操作 如果是ajax,是可以设置header $.ajax({ url: "", data: {}, type: "GET", beforeSend: function(xhr){xhr.setRequestHeader('X-Test-Header', 'test-value');},//这里设置header success: funct

  • 详解Vue-axios 设置请求头问题

    在axios向后端传参时需要设置请求头,确保请求参数的格式为JSON字符串(此时用JSON.stringify(obj)无效时) this.$axios({ method:'', url:'', headers: { 'Content-Type': 'application/json',//设置请求头请求格式为JSON 'access_token': this.token //设置token 其中K名要和后端协调好 }, params:{} }).then((response)=>{}) 下面看

  • 使用Feign传递请求头信息(Finchley版本)

    使用Feign传递请求头信息(Finchley版本)

    目录 Feign传递请求头信息 实现RequestInterceptor接口 注册配置 Feign调用微服务传递header请求头 Feign传递请求头信息 在我之前的文章服务网关Spring Cloud Zuul中,将用户的登录id放在了请求头中传递给内部服务. 但是当内部服务之间存在feign调用时,那么请求头信息会在feign请求的时候传递吗?不会,请求的头信息和请求参数都不会进行传递. 但是我们可以通过通过实现RequestInterceptor接口,完成对所有的Feign请求,传递请求

  • Vue如何为GET或POST请求设置请求头

    目录 为GET或POST请求设置请求头 安装vue-cookies vue项目设置请求头权限问题 为GET或POST请求设置请求头 安装vue-cookies 就通过我写的一个小项目的登录来讲vue-cookies,登陆成功后拿到后台返回的token值,把它保存到vue-cookies中 首先需要安装vue-cookies npm install vue-cookies --save 使用 import Vue from 'vue' import VueCookies from 'vue-coo

  • zuul过滤器中转发请求头的解决方案

    zuul过滤器中转发请求头的解决方案

    zuul过滤器中转发请求头 Zuul网关过滤的时候,如果不在网关过滤时转发请求头,经过网关时请求头就会丢失. 网关过滤转发请求头代码如下 @Override public Object run() throws ZuulException { RequestContext currentContext = RequestContext.getCurrentContext(); HttpServletRequest request = currentContext.getRequest(); En

随机推荐