ASP.NET Core 6 MVC通过授权从API显示图片遇未授权问题求助

你遇到的未授权错误核心原因是：API返回的ImageUrl是直接指向静态文件的URL，当浏览器加载该图片时，会发起独立的GET请求，这个请求不会自动携带你的Bearer令牌，而API的静态文件目录没有配置授权验证，因此触发401未授权错误。

方案一：为API静态文件请求添加授权验证 #

修改API的Program.cs，在静态文件中间件中添加授权校验，确保只有已授权用户能访问指定目录下的图片：

// 先配置认证和授权中间件
app.UseAuthentication();
app.UseAuthorization();

// 配置静态文件，针对Images目录添加授权校验
app.UseStaticFiles(new StaticFileOptions
{
    FileProvider = new PhysicalFileProvider(
        Path.Combine(builder.Environment.ContentRootPath, "Images")),
    RequestPath = "/Images",
    OnPrepareResponse = ctx =>
    {
        // 检查当前请求是否已认证
        if (!ctx.Context.User.Identity.IsAuthenticated)
        {
            ctx.Context.Response.StatusCode = StatusCodes.Status401Unauthorized;
            ctx.Context.Response.ContentLength = 0;
            ctx.Context.Response.Body = Stream.Null;
        }
    }
});

注意：此方案会让所有/Images路径下的静态文件都需要授权，若有无需授权的静态文件，可单独拆分目录配置。

方案二：通过API直接返回图片流，MVC转换为Base64显示 #

放弃返回静态文件URL，让API直接返回图片二进制流，MVC端将流转换为Base64字符串后在视图中渲染，全程通过授权接口请求：

1. 修改API的DisplayImages方法 #

[Authorize]
[HttpGet("{FolderName}/{ImageName}")]
public IActionResult DisplayImages(string FolderName, string ImageName)
{
    string path = Path.Combine("Images", FolderName, ImageName);
    FileInfo file = new FileInfo(path);
    
    if (!file.Exists)
        return NotFound();

    // 获取图片ContentType
    var contentTypeProvider = new FileExtensionContentTypeProvider();
    if (!contentTypeProvider.TryGetContentType(file.Name, out var contentType))
    {
        contentType = "application/octet-stream";
    }

    // 返回图片流
    return PhysicalFile(path, contentType);
}

2. 修改MVC端代码 #

using (var response = await client.GetAsync("Account/UploadedImage/" + UserId, HttpCompletionOption.ResponseHeadersRead))
{
    var apiResponse = await response.Content.ReadAsStreamAsync();
    userimglist = await System.Text.Json.JsonSerializer.DeserializeAsync<List<UserImage>>(apiResponse, 
        new System.Text.Json.JsonSerializerOptions { IgnoreNullValues = true, PropertyNameCaseInsensitive = true });
    
    using (HttpClient client2 = APIImage.Initial())
    {
        client2.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue("Bearer", TokenKey);
        using (var response2 = await client2.GetAsync("Images/DisplayImages/CompUser/" + userimglist[0].ImageName, HttpCompletionOption.ResponseHeadersRead))
        {
            if (response2.IsSuccessStatusCode)
            {
                var imageStream = await response2.Content.ReadAsStreamAsync();
                using (var memoryStream = new MemoryStream())
                {
                    await imageStream.CopyToAsync(memoryStream);
                    byte[] imageBytes = memoryStream.ToArray();
                    // 生成Base64格式的图片字符串
                    userimglist[0].ImageBase64 = $"data:{response2.Content.Headers.ContentType};base64,{Convert.ToBase64String(imageBytes)}";
                }
            }
            else
            {
                // 处理请求失败情况，比如设置默认图片
                userimglist[0].ImageBase64 = "/images/default-user.png";
            }
        }
    }
}

3. 视图中显示图片 #

在Razor视图中直接使用Base64字符串渲染图片：

@foreach(var image in Model)
{
    <img src="@image.ImageBase64" alt="用户图片" class="user-image" />
}

额外检查项 #

• 确认TokenKey有效且未过期，包含API[Authorize]要求的权限/角色
• 检查API的认证配置（如JWT）是否正确，确保令牌能被正确解析和验证

内容的提问来源于stack exchange，提问作者Ankita Sen