如何设置Express.js响应头以支持前端Axios代码访问？

当然没问题！这是前端和后端协作中很常见的需求——不管是自定义响应头还是某些非默认的标准头，只要在Express里正确配置，前端Axios完全能访问到。我分场景给你讲清楚怎么做：

一、同域请求场景（前端和后端域名/端口一致） #

如果你的前端和后端运行在同一个域名（包括端口）下，配置非常简单：直接在Express路由里设置响应头，前端Axios就能通过response.headers直接拿到。

示例代码：

Express后端 #

app.get('/api/user', (req, res) => {
  // 设置自定义响应头
  res.set('X-User-ID', '12345');
  // 设置标准响应头（比如ETag）
  res.set('ETag', 'abc123');
  
  res.json({ username: 'john_doe' });
});

前端Axios请求 #

axios.get('/api/user')
  .then(res => {
    console.log('用户ID:', res.headers['x-user-id']); // 输出 "12345"
    console.log('ETag:', res.headers.etag); // 输出 "abc123"
    console.log('响应体:', res.data); // 输出 { username: 'john_doe' }
  })
  .catch(err => console.error(err));

二、跨域请求场景（前端和后端域名/端口不同） #

跨域情况下，浏览器会遵循CORS（跨域资源共享）规则，默认只允许前端访问简单响应头（比如Content-Type、Cache-Control等）。如果要让前端访问自定义头或非简单标准头，必须在Express中配置Access-Control-Expose-Headers。

方法1：手动配置CORS头（适合简单场景） #

app.get('/api/data', (req, res) => {
  // 允许指定前端域名跨域（也可以用*允许所有，但生产环境不建议）
  res.set('Access-Control-Allow-Origin', 'http://localhost:3000');
  // 暴露需要前端访问的响应头，多个头用逗号分隔
  res.set('Access-Control-Expose-Headers', 'X-Custom-Header, ETag');
  
  // 设置响应头
  res.set('X-Custom-Header', 'my-custom-value');
  res.set('ETag', 'def456');
  
  res.json({ data: 'some-cross-domain-data' });
});

方法2：使用cors中间件（推荐，适合全局配置） #

生产环境更推荐用官方的cors中间件，配置更灵活、更规范：

1. 先安装依赖：

npm install cors

2. 在Express中配置：

const cors = require('cors');
const express = require('express');
const app = express();

// 全局CORS配置
app.use(cors({
  origin: 'http://localhost:3000', // 允许的前端域名
  exposedHeaders: ['X-Custom-Header', 'X-Another-Header'] // 要暴露的响应头列表
}));

// 路由示例
app.get('/api/items', (req, res) => {
  res.set('X-Custom-Header', 'hello-from-express');
  res.json({ items: [1, 2, 3] });
});

前端Axios跨域请求示例 #

axios.get('http://localhost:5000/api/items')
  .then(res => {
    console.log('自定义头:', res.headers['x-custom-header']); // 输出 "hello-from-express"
  })
  .catch(err => console.error(err));

关键说明 #

• 简单响应头：浏览器默认允许前端访问的响应头包括Content-Type、Cache-Control、Content-Language、Expires、Last-Modified、Pragma，这些不需要额外配置暴露。
• 自定义头/非简单头：所有自定义响应头（比如X-*开头的）以及部分标准头（比如ETag、Authorization响应头），跨域时必须通过Access-Control-Expose-Headers暴露才能被前端访问。

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