React项目中Axios响应头（如Us....Etag）可见但无法访问

问题原因 #

跨域请求时，浏览器出于安全限制，只会把CORS安全列表内的响应头暴露给前端JS（比如Content-Type、Cache-Control这类）。你看到的Us....Etag属于自定义或非默认响应头，必须让服务器通过Access-Control-Expose-Headers头明确声明允许前端访问，否则即使网络面板能看到，JS也拿不到。

解决方案 #

1. 服务器端配置（以ASP.NET Core为例）

在你的.NET后端项目里，修改CORS配置，把Us....Etag加入暴露的头列表：

// Program.cs 或 Startup.cs
builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactClient",
        policy =>
        {
            policy.WithOrigins("http://localhost:3000") // 替换成你的React应用地址
                  .AllowAnyMethod()
                  .AllowAnyHeader()
                  .WithExposedHeaders("Us....Etag"); // 这里填你实际的响应头字段名
        });
});

// 记得启用CORS中间件
app.UseCors("AllowReactClient");

2. 前端验证

服务器配置完成后，重新请求接口，你可以先打印所有响应头的键，确认字段是否被暴露：

const response = await dotnetApiClient().get(`/my-api`);
console.log("响应头所有键：", Object.keys(response.headers));
// 之后再获取字段
const etag = response.headers["Us....Etag"];
console.log("Etag值：", etag);

这样就能正常拿到Us....Etag的值了。

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