无法在$ http响应中以角度访问'WWW-authenticate'标头

时间:2015-05-15 15:19:26

标签: angularjs authentication express cors

有人可以告诉我为什么我的'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开发工具时,我会在“响应标头”下看到正在进行的请求的以下内容。

回复标题
访问控制允许来源http://localhost:8080
访问控制 - 暴露 - 接头:WWW验证
连接:保活
日期:2015年5月15日星期五13:48:29 GMT
的ETag :W / “f7-1470611871”
WWW-Authenticate :{“token”:“encryptedToken”,“message”:“encryptedMessage”} 的 X供电-通过:快递

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

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

提前感谢您的帮助!

3 个答案:

答案 0 :(得分:1)

好的......经过一些试验和错误,我们已经想到了这一点。虽然我有预先挂起的X-自定义标题是一个过时的和不必要的paractive,但是看起来无论是在这种情况下使用的浏览器还是角度本身都期望它。

更改标题名称:

WWW-authenticate

X-WWW-authenticate

解决了这个问题。如果有人能说清楚这一点,请做。

事实上,在这里引用第一个问题:Custom HTTP headers : naming conventions X-​​的使用已被弃用,实际上标题应该只是'明智地命名'没有任何前缀。也许考虑重命名为:

appName-authenticate

或类似的最佳做法。

答案 1 :(得分:1)

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

如果使用的是ASP.NET Web API,则可以直接在exposedHeaders参数上设置System.Web.Cors.CorsPolicy.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 :(得分:0)

这不是客户端问题,在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")