解释 HTTP 中的内容协商，如何根据客户端偏好返回合适的内容？

一、内容协商的本质与价值

内容协商（Content Negotiation）是HTTP协议中客户端与服务器就资源表现形式达成一致的协商机制。其核心价值在于：​用同一URI提供资源的不同表现形式，同时保证客户端获得最适合自身环境的内容版本。

典型应用场景：

1. 多语言站点自动适配浏览器语言
2. 根据设备类型返回移动版/桌面版页面
3. API接口支持JSON/XML等多种数据格式
4. 图片资源按客户端支持格式自动转换

二、核心协商机制解析

1. 请求头驱动机制

客户端通过以下请求头声明偏好：

• Accept: 可接受的媒体类型（如text/html）
• Accept-Language: 自然语言偏好（如zh-CN）
• Accept-Encoding: 内容编码偏好（如gzip）
• Accept-Charset: 字符集偏好（如UTF-8）

2. 服务端决策流程

服务端接收到请求后，按以下优先级处理：

1. 检查Accept头中的媒体类型
2. 解析Accept-Language语言偏好
3. 应用Accept-Encoding压缩方式
4. 最终确定响应内容格式

三、实战代码示例

1. Express服务端多格式支持

// 中间件：内容协商处理器
function contentNegotiation(req, res, next) {
    // 检测客户端接受的媒体类型
    const accepts = req.accepts(['json', 'html', 'xml']);
    
    // 设置默认响应格式
    res.format({
        'text/html': () => {
            res.render('user-profile', { user: req.user });
        },
        'application/json': () => {
            res.json({ data: req.user });
        },
        'application/xml': () => {
            const xml = `<user><id>${req.user.id}</id></user>`;
            res.type('xml').send(xml);
        },
        default: () => {
            // 不支持的格式返回406
            res.status(406).send('Not Acceptable');
        }
    });
    
    next();
}

// 路由应用中间件
app.get('/profile', contentNegotiation);

2. 前端请求示例

// 明确请求JSON格式
fetch('/api/data', {
    headers: {
        'Accept': 'application/json'
    }
});

// 支持多种格式的灵活请求
fetch('/api/data', {
    headers: {
        'Accept': 'application/json, text/xml;q=0.9'
    }
});

3. Nginx多语言配置示例

server {
    # 启用内容协商
    index index.html;
    
    # 定义可用语言
    root /var/www;
    types {
        text/html html;
    }
    
    # 语言优先级处理
    split_clients "$http_accept_language" $lang {
        40% en;
        30% fr;
        20% de;
        10% zh-CN;
    }
    
    location / {
        try_files $uri/$lang/index.html =404;
    }
}

四、工程实践建议

1. 缓存控制策略

必须配合Vary头确保缓存有效性：

// Express设置Vary头示例
app.get('/data', (req, res) => {
    res.vary('Accept-Encoding, Accept-Language');
    // ...响应处理
});

2. 多语言实现要点

// 中间件：语言协商
app.use((req, res, next) => {
    const langs = req.acceptsLanguages('en', 'zh', 'ja');
    req.preferredLang = langs || 'en';
    next();
});

// 路由处理器
app.get('/page', (req, res) => {
    const template = `${req.preferredLang}/page.html`;
    res.render(template);
});

3. 版本控制最佳实践

GET /api/v2/users HTTP/1.1
Accept: application/vnd.myapi.v2+json

// 版本协商中间件
app.use('/api', (req, res, next) => {
    const version = req.get('Accept').match(/vnd\.myapi\.v(\d+)/)?.[1] || 1;
    req.apiVersion = parseInt(version);
    next();
});

五、注意事项与调试技巧

1. 质量参数(q)处理

客户端请求示例：

http

Accept: text/html;q=0.8, application/json;q=0.9

服务端处理逻辑：

javascript

function parseAccept(header) {
    return header.split(',')
        .map(type => {
            const [mime, q = '1'] = type.split(';q=');
            return { mime: mime.trim(), q: parseFloat(q) };
        })
        .sort((a, b) => b.q - a.q);
}

2. 调试工具使用

Chrome开发者工具示例：

javascript

// 控制台测试不同Accept头
fetch('/data', {
    headers: {
        'Accept': 'text/html, application/xhtml+xml;q=0.9'
    }
}).then(r => r.headers.get('Content-Type'));

六、性能优化建议

1. 压缩策略优化

nginx

gzip_types text/plain application/json;
gzip_proxied any;

1. 缓存策略优化

nginx

location /static/ {
    expires 1y;
    add_header Vary Accept-Encoding;
    gzip_static on;
}

七、常见问题排查

1. 响应格式不符合预期

• 检查Accept头是否被正确传递
• 验证服务端支持的格式列表
• 查看网络请求的Response Headers

1. 语言切换失效

   // 中间件调试输出
   console.log('Detected languages:', req.acceptsLanguages());

2. 缓存异常行为

   // Express中间件添加调试头
   app.use((req, res, next) => {
   res.set('Debug-Accept', req.get('Accept'));
   next();
   });

通过合理的内容协商机制实现，可使Web应用具备更强的设备适应性和国际扩展能力。重点在于正确理解各Accept-*头的处理逻辑，配合适当的缓存策略，在灵活性与性能之间取得平衡。