React应用组件无法读取REST API响应头，响应头为空求助

云上老周

2026-6-18

问题描述

我开发了一个基于React.js和Asp.Net Core（C#）的Web应用。使用Postman或Swagger请求接口时，能正常获取响应头；但在React中通过以下fetch代码调用接口时，响应头为空：

const res = await fetch(url, options);
const data = await res.json();
console.log("Head ",res);

控制台打印的res对象中headers为空，我已在fetch的options中配置了Authorization，但仍无法获取响应头。项目的package.json配置如下：

{
  "name": "linkedin",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "start": "vite preview",
    "lint": "eslint . --ext js,jsx --report-unused-disable-directives --max-warnings 0",
    "preview": "vite preview",
    "build": "vite build --watch"
  },
  "dependencies": {
    "@cloudinary/react": "^1.13.0",
    "@cloudinary/url-gen": "^1.20.0",
    "@fortawesome/fontawesome-free": "^6.6.0",
    "@fortawesome/fontawesome-svg-core": "^6.6.0",
    "@fortawesome/free-solid-svg-icons": "^6.6.0",
    "@fortawesome/react-fontawesome": "^0.2.2",
    "@react-icons/all-files": "^4.1.0",
    "axios": "^1.6.8",
    "cloudinary": "^2.4.0",
    "cors": "^2.8.5",
    "express": "^4.19.2",
    "mssql": "^10.0.2",
    "multer": "^1.4.5-lts.1",
    "path": "^0.12.7",
    "primeicons": "^7.0.0",
    "primereact": "^10.8.2",
    "react": "^18.2.0",
    "react-datepicker": "^7.3.0",
    "react-dom": "^18.2.0",
    "react-icons": "^5.1.0",
    "react-router-dom": "^6.23.1",
    "watch": "^0.13.0"
  },
  "devDependencies": {
    "@types/react": "^18.2.66",
    "@types/react-dom": "^18.2.22",
    "@vitejs/plugin-react": "^4.2.1",
    "eslint": "^8.57.0",
    "eslint-plugin-react": "^7.34.1",
    "eslint-plugin-react-hooks": "^4.6.0",
    "eslint-plugin-react-refresh": "^0.4.6",
    "vite": "^5.4.0",
    "webpack-dev-server": "^5.0.4"
  }
}

解决方法

这个问题是跨域资源共享(CORS)的响应头暴露限制导致的。浏览器出于安全考虑，默认只会暴露少数标准响应头（比如Content-Type），自定义或非标准响应头需要后端明确配置允许暴露给前端。

步骤1：在ASP.NET Core后端配置CORS，指定允许暴露的响应头
找到Program.cs（或旧版本的Startup.cs）中的CORS配置代码，添加WithExposedHeaders方法，列出你需要前端能获取的响应头名称。示例代码：

builder.Services.AddCors(options =>
{
    options.AddPolicy("AllowReactApp", policy =>
    {
        policy.WithOrigins("http://localhost:5173") // 替换成你的React应用实际地址
              .AllowAnyMethod()
              .AllowAnyHeader()
              .WithExposedHeaders("Authorization", "X-Custom-Header"); // 这里填你要让前端访问的响应头，比如Authorization或自定义头
    });
});

// 确保在app.UseRouting()之后、app.UseAuthorization()之前启用CORS
app.UseCors("AllowReactApp");

步骤2：前端正确读取响应头
res.headers是Headers对象，直接打印可能看不到完整内容，需要用res.headers.get('HeaderName')获取具体值，示例：

const res = await fetch(url, options);
// 直接获取指定响应头
const authHeader = res.headers.get('Authorization');
console.log("Authorization Header:", authHeader);
const data = await res.json();

额外说明
Postman和Swagger不受浏览器的CORS规则限制，所以能看到全部响应头，这就是它们正常而React中无法获取的核心原因。如果后端返回的是自定义响应头，必须把它加到WithExposedHeaders的参数列表里，否则浏览器会阻止前端访问。

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