Angular获取response headers的内容

最新推荐文章于 2022-09-16 13:42:40 发布
最新推荐文章于 2022-09-16 13:42:40 发布
阅读量2.9k 收藏 2
点赞数
分类专栏： Angular 记录 文章标签： typescript angularjs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_43658453/article/details/108201131
版权

Angular获取response headers的内容

一般用response headers功能是用来获取Date或者token等等内容

请求头
但是一般情况下你获取到的是 null
TS代码打印的是null
这个时候你需要在后台配置一句：

Access-Control-Expose-Headers: Cache-Control, Content-Language, Content-Type, Expires, Last-Modified, Date

如果你是前端开发者的话，你就去要求后台人员配置一下。冒号后面的值按照查询需求来添加

配置之后的效果
希望对大家有帮助。

来回三五七
关注
  • 0
    点赞
  • 踩
  • 2
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
专栏目录
AngularJS跨域和session失效问题
leebin_20的博客
11-25 5088
跨域问题： response.setHeader(“Access-Control-Allow-Methods”, “POST, GET, OPTIONS, DELETE”); response.setHeader(“Access-Control-Max-Age”, “3600”); response.setHeader(“Access-Contr
angular获取请求头_Angular6 HttpClient :怎么能获取response header
weixin_39865204的博客
12-20 762
api.service.tsimport { HttpClient } from '@angular/common/http';import { Injectable, isDevMode } from '@angular/core';import { NzNotificationService } from 'ng-zorro-antd';// import { Observable } fro...
angularjs中取出服务器返回的header中的数据。
乐天小葵
05-06 2230
$http.post('v1/tickets', "username=123&password=qwe&additionalParam1=paramvalue") .success(function(response, status, headers, config) { alert("get TGT from server! please check th
response.setheader无效的原因之一
热门推荐
zjy105的专栏
11-12 1万+
最近搭建架构的时候，使用了HandlerInterceptorAdapter， 在afterCompletion 或 postHandle中使用了response.setHeader("token", token);  初衷是想在方法执行完成后，把新的jwt令牌返回给调用方。 但是实际返回中获取不到set的值。   原因是：response的header设置，要在缓冲区装入响应内容之前，...
angularjs 取response header 信息
ayixideluss的博客
03-28 2043
angularjs 取response header 信息效果图 最近更新项目的一个模块，后台在登录的时候把信息返回到response header 查了很多东西，找到一种解决方法，话不多说上代码 $.ajax({ type: 'post', // 获取头信息，type=HEAD即可 url : '/v1/login', da...
AngularJs图片获取自定义Header
weixin_34392843的博客
07-02 150
2019独角兽企业重金招聘Python工程师标准>>> ...
angular获取请求头_从Angular中的HttpClient post请求获取响应头？
weixin_39634997的博客
12-20 657
I'm trying to get the response headers from a post request, but the HttpResponse object doesn't contain the same headers that I can see in the network. What am I doing wrong? I need to access the valu...
angular获取请求头_Angular 4.3.3 HttpClient：如何从响应的标头获取值？
weixin_32792909的博客
12-30 517
(编辑：VS代码;打字稿：2.2.1)目的是获取请求响应的标头假设服务中具有HttpClient的POST请求import {Injectable} from "@angular/core";import {HttpClient,HttpHeaders,} from "@angular/common/http";@Injectable()export class MyHttpClientServi...
angular常用指令，跨域请求解决，获取Response Headers的token信息，调用接口同时传参数和请求头问题处理，未登录状态路由拦截，统一设置请求头和统一处理请求错误
weixin_43965143的博客
02-01 1075
在学习angular的过程中遇到的问题汇总记录 创建文件指令： 备注：name为创建的文件路径及名称，默认是在src/app下 创建module.ts文件：ng g m name 创建component.ts文件：ng g c name 创建name-routing.module.ts文件：ng g m --routing name 创建.service.ts文件：ng g service name 创建.interceptor.ts文件：ng g interceptor name 创建.guard.ts文
Angular Excel 导入与导出的实现代码
12-10
当文件加载完成后，使用xlsx库解析二进制数据为工作簿对象，并从中获取第一个工作表。最后，`sheet_to_json`函数将工作表转换为JSON格式的数据，存储在`excelData`数组中。 **Excel导出** 在Angular中导出Excel...
angular之interceptors拦截器
06-19
config.headers['Authorization'] = 'token666'; ``` 如果`request`方法返回的是无效的配置或Promise，那么HTTP请求将被取消或失败。 3. **response拦截器**： `response`方法在HTTP响应到达且尚未被处理时调用...
Angular2 http jsonp的实例详解
12-09
在这个例子中，我们创建了一个包含`Content-Type`头的`Headers`对象，以表明我们发送的是JSON数据。然后，`post()`方法使用这个URL、JSON格式的数据和选项发起POST请求。 ### JSONP JSONP（JSON with Padding）是...
浅谈Angular HttpClient简单入门
08-27
如果服务器返回 JSON 数据，可以使用 `json()` 方法将响应数据转换为 JSON 对象。 例如，在服务中添加以下代码： ```typescript getConfig() { return this.http.get('请求地址', { headers: this.headers }) ...
Angular4 Http
08-10
map(response => response.json()), // 转换响应数据 catchError(error => throwError('Something went wrong!')) // 错误处理 ).subscribe(); ``` ### 6. HTTP拦截器 Angular4的HTTP模块还支持拦截器，这使得...
angular无法获取响应头HttpContext.Response.Headers / 公开标头
weixin_46484674的博客
09-16 4414
后端返回结果放进了响应头中（response header）；前端拿不到该响应头内容，前端打印出来的，一个都看不见（使用angular4 自带的拦截器）。`Access-Control-Expose-Headers`响应报头。在使用CORS方式跨域时，浏览器只会返回`默认的头部`Header。CORS规范将这些头称为`简单响应头`。要使用其他头可用于应用，请调用 WithExposedHeaders(String[])方法，设置公开。在使用CORS方式跨域时，浏览器只会返回`默认的头部`Header
angularjs ajax header,AngularJS $resource Headers POST
weixin_42311349的博客
08-05 127
I would like to know how to pass headers to AngularJS $resource methodHere is the factory method.factory('DataRepository', function ($resource) {return $resource(serviceUrlPrefix + '/api/v1/AppList/:i...
angular获取请求头_angularjs 文件下载 并 从response header中获取文件名
weixin_39541681的博客
12-20 480
最近在做一个下载文件的功能，后台接口给的是二进制流的方式，那么前端要把二进制流下载下来。这个过程使用$http的get请求，使用Blob接收，倒是没有难度，主要是遇到了，后台的文件名拿不到 的问题。在浏览器 中是可以看到的这个请求头，就是js获取不到，如下图：js中，使用response.headers()，只能获取到content-type,而获取不到content-disposition.获取...
angular中如何更改response.headers.get('X-toyoApp-alert')这个key的value
最新发布
05-30
在 Angular 中，要更改 `response.headers.get('X-toyoApp-alert')` 的值，您可以使用 `HttpInterceptor`。拦截器是 Angular 中用于在请求和响应之间添加通用处理逻辑的机制之一。您可以创建一个拦截器来更改 `X-toyoApp-alert` 头的值，然后将其注入您的应用程序中。 以下是如何创建一个拦截器来更改 `X-toyoApp-alert` 头的值的示例代码： ```typescript import { Injectable } from '@angular/core'; import { HttpInterceptor, HttpHandler, HttpRequest, HttpResponse } from '@angular/common/http'; @Injectable() export class MyInterceptor implements HttpInterceptor { intercept(request: HttpRequest<any>, next: HttpHandler) { return next.handle(request).pipe( tap((event) => { if (event instanceof HttpResponse) { const alertHeader = event.headers.get('X-toyoApp-alert'); if (alertHeader) { // 更改头的值 event = event.clone({headers: event.headers.set('X-toyoApp-alert', 'new value')}); } } }) ); } } ``` 在上面的代码中，我们创建了一个名为 `MyInterceptor` 的拦截器，它会拦截所有 HTTP 请求和响应。在 `intercept()` 方法中，我们首先调用 `next.handle(request)` 来继续处理请求。然后，我们使用 RxJS 的 `tap()` 操作符来处理响应。如果响应是 `HttpResponse` 类型，并且包含 `X-toyoApp-alert` 头，我们使用 `clone()` 方法来创建响应的副本，并设置新的头值。 要将拦截器应用于您的应用程序，请在 `AppModule` 中将其提供给 `HTTP_INTERCEPTORS` 标记。例如： ```typescript import { NgModule } from '@angular/core'; import { HttpClientModule, HTTP_INTERCEPTORS } from '@angular/common/http'; import { MyInterceptor } from './my-interceptor'; @NgModule({ imports: [HttpClientModule], providers: [ { provide: HTTP_INTERCEPTORS, useClass: MyInterceptor, multi: true } ] }) export class AppModule { } ``` 在上面的代码中，我们将 `MyInterceptor` 提供给 `HTTP_INTERCEPTORS` 标记，并设置 `multi: true` 选项，以确保它不会覆盖其他拦截器。现在，每当您的应用程序发出 HTTP 请求时，拦截器都会拦截它，并更改 `X-toyoApp-alert` 头的值（如果存在）。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值