无法以角度访问 $http 响应中的“WWW-authenticate”标头答案

【问题标题】：Cannot access 'WWW-authenticate' header within $http response in angular无法以角度访问 $http 响应中的“WWW-authenticate”标头
【发布时间】：2015-07-27 14:14:53
【问题描述】：

谁能告诉我为什么我的 'WWW-Authenticate' 标头在响应中为空，尽管我可以在 Chrome 开发工具中看到字符串化的 'WWW-Authenticate' 标头对象？

在服务器端，我正在执行以下操作来设置我的 WWW-Authenticate 标头以及为 CORS 设置正确的标头：

res.setHeader('Access-Control-Allow-Origin', 'http://localhost:8080');
res.setHeader('Access-Control-Expose-Headers', 'WWW-Authenticate');
res.setHeader('WWW-Authenticate', JSON.stringify({
    "token": "encryptedToken", 
    "message": "encryptedMessage"
}));

我相信我在服务器端正确设置了标头，因为当我查看 Chrome 开发工具时，我在“响应标头”下看到正在发出的请求的以下内容。

响应标头
Access-Control-Allow-Origin：http://localhost:8080
Access-Control-Expose-Headers :WWW-Authenticate
Connection:keep-alive
日期：格林威治标准时间 2015 年 5 月 15 日星期五 13:48:29
ETag:W/"f7-1470611871"
WWW-Authenticate: {"token":"encryptedToken","message":"encryptedMessage"}
X-技术支持：快递

但是，当我尝试从响应中访问“WWW-Authenticate”标头时，我得到 NULL。

$http.get("http://localhost:4242/days")
.then(function (response) {
    var AuthHeader = response.headers('WWW-Authenticate');
    console.log (AuthHeader); // returns null
})

提前感谢您的帮助！

【问题讨论】：

尝试记录整个响应对象
响应对象 --- {data: Array[7], status: 200, headers: function, config: Object, statusText: "OK"}
不，我想访问“WWW-Authenticate”标头对象（仍然是字符串化的），但是即使我可以在开发工具中看到该对象，response.headers 函数也会一直返回 null。
出于好奇，如果您使用 console.log(response.headers()) 会发生什么？
对象 {content-type: "application/json; charset=utf-8"}.

标签： angularjs authentication express cors

【解决方案1】：

Access-Control-Expose-Headers 标头可以设置为包含www-authenticate。此标头将允许客户端（包括 Angular）读取 CORS 请求的响应标头。

如果您使用的是 ASP.NET Web API，那么您可以直接在System.Web.Cors.CorsPolicy.ExposedHeaders 参数上设置exposedHeaders，也可以向控制器方法添加一个属性。属性方法描述在Enabling Cross-Origin Requests in ASP.NET Web API 2。

这里有几个使用 ASP.NET Web API 的示例。

示例：设置ExposedHeaders参数

var corsPolicy = new CorsPolicy();
corsPolicy.ExposedHeaders.Add("www-authenticate");

var corsOptions = new CorsOptions
{
    PolicyProvider = new CorsPolicyProvider
    {
        PolicyResolver = context => Task.FromResult(corsPolicy)
    }
};

app.UseCors(corsOptions);

示例：使用属性

[EnableCors(origins: "*", headers: "*", methods: "*", exposedHeaders: "www-authenticate")]
public class TestController : ApiController
{
    // ...
}

如果您为 API 使用不同的框架，则需要研究该框架以了解如何设置 Access-Control-Expose-Headers 标头。

【讨论】：

【解决方案2】：

好的...所以经过一些试验和错误，我们已经弄清楚了。虽然我认为在自定义标头之前添加 X- 是一种过时且不必要的 paractive，但似乎在这种情况下使用的浏览器或者可能是 angular 本身正在期待它。

更改标题名称：

WWW-authenticate

到

X-WWW-authenticate

解决问题。如果有人可以对此有所了解，请这样做。

事实上，在这里引用第一个答案：Custom HTTP headers : naming conventions X- 的使用已被弃用，实际上标题应该只是“合理命名”而没有任何前缀。也许考虑重命名为：

appName-authenticate

或类似的最佳做法。

【讨论】：

【解决方案3】：

这不是客户端问题，在 CORS 情况下，浏览器不会允许此标头，因为它没有收到来自服务器的绿灯（另一个标头），表明它可以暴露给客户端！

因此，对于那些使用 ASP.NET Core 的人，您可以在 Startup.cs 中公开此标头：

void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    ...
    app.UseCors(x => x.AllowAnyOrigin()
    .AllowAnyMethod()
    .AllowAnyHeader()
    .WithExposedHeaders("WWW-Authenticate"));

或者

void ConfigureServices(IServiceCollection services)
    ...
    services.AddCors(options =>
    {
        var corsPolicy = new CorsPolicy();
        corsPolicy.Origins.Add("*");
        corsPolicy.Methods.Add("*");
        corsPolicy.Headers.Add("*");
        corsPolicy.ExposedHeaders.Add("WWW-Authenticate");
        options.AddPolicy("CorsPolicy", corsPolicy);
    });

void Configure(IApplicationBuilder app, IWebHostEnvironment env)
    ...
    app.UseCors("CorsPolicy")

【讨论】：