angular无法获取响应头HttpContext.Response.Headers / 公开标头

问题描述

后端返回结果放进了响应头中（response header）；
前端拿不到该响应头内容，前端打印出来的，一个都看不见（使用angular4 自带的拦截器）。

问题解决

后端人员需要给前端返回公开你的自定义响应头。除了给前端传自定义响应头之外，还需要公开标头，让前端看到你的自定义标头。（响应头有六种默认的，除默认的外其他响应头均为‘自定义’）

后端改动代码

我因为业务需要，故使用了过滤器。代码中的方式方法自己根据需求情况而定。
不用过度理解这里，重点看新增响应头方法： void Add(TKey key, TValue value);

XXX.Response.Headers.Add(key,value);

//操作方法执行后 调用此方法
public override void OnActionExecuted(ActionExecutedContext context)
{
    string data= getData();

    //新增响应头：X-Check-Submit-Repeat
    context.HttpContext.Response.Headers.Add("X-Check-Submit-Repeat", data);

}

效果展示

• postman接请求展示
  

• 页面效果展示
  

前端改动代码

前端代码不清楚，毕竟不是专业的前端人员T^T
使用angular4 自带的拦截器
不论使用什么语言获取，获取出来的都是null

效果展示

问题现象： angular 无法获取响应头 Response Header 原因

跨域问题 启用跨域请求（CORS）

前后端分离的项目，前端地址与后端地址不同,出现了跨域问题，因此 前端人员拿取不到后端返回的Response.headers.自定义的响应头 “X-Check-Submit-Repeat”(只能拿到默认的标头)

在使用CORS方式跨域时，浏览器只会返回默认的头部Header：

• 默认情况下可用的响应头包括：
  • Cache-Control
  • Content-Language
  • Content-Type
  • Expires
  • Last-Modified
  • Pragma

CORS规范将这些头称为简单响应头。要使用其他头可用于应用，请调用 WithExposedHeaders(String[])方法，设置公开。

解决方案

下面将会解释一下为什么要改？怎么改？在什么地方更改？

1.为什么要改？

前后端分离项目，引起跨域问题，会导致响应头只能拿到默认的响应头，自定义的响应头是无法拿到手的；
因此，前端人员在这种情况下，一般获取到的是 null 。

2.怎么改？

这就需要你再后台配置一句：

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

如果你是前端人员，那就要通知后端人员更改了。
冒号后面的就依据你自己展示，例如：Access-Control-Expose-Headers：X-Check-Submit-Repeat

3.在什么地方更改？

后端更改大体流程：

• 在 Core 中启用跨源请求 (CORS)
• 找到代码中解决跨域问题的代码
• 设置公开的响应头

1. 在 Core 中启用跨源请求 (CORS)

首先是你的项目配置了跨域相关的代码，解决了跨域问题 能够支持正常的跨域。emmmmmmmmm这个项目中都已经开启好了，我就不详说了。

2. 找到代码中解决跨域问题的代码

第二步是你要找到你项目中跨域的配置代码放在了哪里？一般是放在了启动里面Program.cs
也有公司会专门放个地方进行配置管理，这个问问项目组内负责人或前辈
名字啥的都有，也有叫AddCor、AddPolicy…

        /// <summary>
        /// CORS策略
        /// </summary>
        /// <param name="app"></param>
        public static void ConfigureCors(this IApplicationBuilder app)
        {
            app.UseCors(builder => builder
                .AllowAnyOrigin()   //设置允许的源
                .AllowAnyMethod()  //允许任何HTTP方法
                .AllowAnyHeader()   //设置允许的请求头
                .AllowCredentials() //允许凭证
            );
        }

3. 设置公开的响应头

找到了写跨域配置的代码后，就调用WithExposedHeaders(String[])方法，将自定义函数设置公开。
参数： 字符串
作用： 需要向客户端公开的标头

        /// <summary>
        /// CORS策略
        /// </summary>
        /// <param name="app"></param>
        public static void ConfigureCors(this IApplicationBuilder app)
        {
            app.UseCors(builder => builder
                .AllowAnyOrigin()   //设置允许的源
                .AllowAnyMethod()  //允许任何HTTP方法
                .AllowAnyHeader()   //设置允许的请求头
                .AllowCredentials() //允许凭证
                .WithExposedHeaders("X-Check-Submit-Repeat") 
            );
        }

配置好后，页面就会出现 公开标头Access-Control-Expose-Headers: X-Check-Submit-Repeat，如下图所示：

扩展 — Access-Control-Expose-Headers

Access-Control-Expose-Headers响应报头指示哪些报头可以公开为通过列出他们的名字的响应的一部分。
默认情况下，只显示6个简单的响应头，在上方也有介绍。
如果你想要客户端能够访问其他的请求头，则必须使用Access-Control-Expose-Headers 列出他们。

语法

Access-Control-Expose-Headers: , , …

参数说明

• header-name
          暴露的头部列表，其中包含零个或多个头部名称，而不是资源可能使用并可能暴露的简单响应头（Response Header）

示例

• 要公开一个非简单的自定义响应头，你可以指定（x开头是命名规范，下方有链接 有时间可以看看）

Access-Control-Expose-Headers: X-Check-Submit-Repeat

• 要公开多个自定义标题，你可以用逗号分隔

Access-Control-Expose-Headers: X-Check-Submit-Repeat ，X-Order

推荐内容

---

• CORS跨域、公开标头
  微端官方文档 —— 在 ASP.NET Core 中启用跨源请求 (CORS)

---

• HttpContext Response/Request.Headers 标头命名规范
  命名规范 —— 自定专用消息头可通过’X-’ 前缀来添加