React中Content-Disposition为null问题：ASP.NET Core API返回PDF异常

核心原因 #

这是浏览器CORS安全策略导致的：

• 跨域请求时，浏览器默认只允许前端脚本访问「简单响应头」（如Content-Type、Cache-Control等），Content-Disposition不属于这个范畴，会被浏览器隐藏，前端无法通过response.headers.get()获取。
• Postman是独立的HTTP客户端，不受浏览器CORS规则限制，因此能看到所有响应头。

解决步骤 #

1. 在ASP.NET Core API中配置CORS，暴露Content-Disposition头 #

在Program.cs中修改CORS配置，明确允许暴露该响应头：

// 注册CORS服务
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp", policy =>
    {
        policy.WithOrigins("http://localhost:3000") // 替换为你的React应用实际域名
              .AllowAnyHeader()
              .AllowAnyMethod()
              .WithExposedHeaders("Content-Disposition"); // 关键：暴露这个头给前端
    });
});

// 启用CORS中间件（注意顺序：要放在UseRouting之后，UseAuthorization之前）
app.UseRouting();
app.UseCors("AllowReactApp");
app.UseAuthorization();

2. 修复API的异常处理（可选但重要） #

原代码中catch块没有返回任何响应，会导致前端请求一直处于挂起状态，补充错误返回：

catch (Exception ex)
{
    Console.Write(ex);
    return StatusCode(StatusCodes.Status500InternalServerError, "生成PDF文件失败");
}

3. 优化React端的fetch代码 #

处理filename可能被双引号包裹的情况，同时添加错误捕获：

fetch(url, options)
.then(response => {
    const contentDisposition = response.headers.get('Content-Disposition');
    if (!contentDisposition) {
        alert('无法获取文件名，将使用默认名称');
        return response.blob().then(blob => ({ blob, filename: 'directdeposit.pdf' }));
    }
    // 提取并清理文件名（去除可能的双引号）
    const filename = contentDisposition.split('filename=')[1].replace(/["']/g, '');
    return response.blob().then(blob => ({ blob, filename }));
})
.then(({ blob, filename }) => {
    const url = window.URL.createObjectURL(blob);
    const a = document.createElement('a');
    a.href = url;
    a.download = filename;
    a.click();
    // 释放URL对象，避免内存泄漏
    window.URL.revokeObjectURL(url);
})
.catch(err => {
    console.error('PDF下载失败:', err);
    alert('下载失败，请稍后重试');
});

内容的提问来源于stack exchange，提问作者Kevin Z