javascript - 返回响应头 OnAuthenticationFailed

Question

如果用户发送的 token 已过期，我将尝试返回更改后的 header ，以便我可以在过期时重新发送我的刷新 token 。

我将 .NET Core 2.2 与重要的“进程中”托管柜一起使用。

这是我的 Startup.cs 中的 ConfigureServices 方法。

services.AddAuthentication(options =>
{
    options.DefaultAuthenticateScheme = "bearer";
    options.DefaultChallengeScheme = "bearer";
}).AddJwtBearer("bearer", options =>
{
    options.TokenValidationParameters = new TokenValidationParameters
    {
        ValidateAudience = false,
        ValidateIssuer = false,
        ValidateIssuerSigningKey = true,
        IssuerSigningKey = new SymmetricSecurityKey(System.Text.Encoding.UTF8.GetBytes(Configuration["serverSigningPassword"])),
        ValidateLifetime = true,
        ClockSkew = System.TimeSpan.Zero //the default for this setting is 5 minutes
    };
    options.Events = new Microsoft.AspNetCore.Authentication.JwtBearer.JwtBearerEvents
    {
        OnAuthenticationFailed = context =>
        {
            if (context.Exception.GetType() == typeof(SecurityTokenExpiredException))
            {
                context.Response.Headers.Add("Token-Expired", "true");
            }
            return System.Threading.Tasks.Task.CompletedTask;
        }
    };
});

然后当我尝试使用以下代码从 javascript 获取“授权”端点时。

async function fetchWithCredentials(url, options) {    
    options.headers['Authorization'] = 'Bearer ' + jwtToken;
    var response = await fetch(url, options);
    if (response.ok) { //all is good, return the response
        return response;
    }

    console.log(response.headers) //nothing in this array

    // it will never do this "if" statement because there are no headers
    if (response.status === 401 && response.headers.has('Token-Expired')) {
        // refresh the token
        return await fetchWithCredentials(url, options); //repeat the original request
    } else { //status is not 401 and/or there's no Token-Expired header
        return response; 
    }
}

这张图片来自悬停在标题上。它确实达到了我的断点(对于 context.Response.Headers.Add() 并且我可以看到计数 = 1(这是我检查时的“ token 过期”)。

最后，这是请求失败后 Postman 的屏幕截图，因此正在发送响应，但我的 JS 未收到响应。

关于为什么我的 header 没有坚持我在 javascript 中的响应有什么想法吗？

Answer 1

当您使用基于 CORS 的 Fetch API 时，访问响应 header 存在限制。由于此限制，您只能访问以下标准 header :

• 缓存控制
• 内容语言
• 内容类型
• 过期
• 最后修改时间
• 编译指示

引用:https://stackoverflow.com/a/44816592/5751404

因此，在客户端访问自定义 header 的一种方法是将 header access-control-expose-headers 添加到响应中， header 以逗号分隔:

services.AddCors(o => o.AddPolicy("MyPolicy", builder =>
{
    builder.AllowAnyOrigin()
          .AllowAnyMethod()
          .AllowAnyHeader()
          .WithExposedHeaders("Token-Expired"); ;
}));

在配置中:

app.UseCors("MyPolicy");

这样您就可以使用 Fetch API over CORS 从客户端访问自定义 header 。