前端无法获取响应头(如Content-Disposition)的原因与解决方案详析

response.setHeader("Content-Disposition", "attachment; filename=\"test.txt\"");
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

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

app.use(cors({
    origin: 'http://frontend-domain', // 或 '*' 允许所有域名
    exposedHeaders: ['Content-Disposition'], // 关键配置
}));

app.get('/download', (req, res) => {
    res.set('Content-Disposition', 'attachment; filename="test.txt"');
    res.send('File content');
});

app.listen(3000);

server {
    listen 80;
    server_name your-domain.com;

    location /api/ {
        proxy_pass http://backend-server;
        proxy_set_header Host $host;
        proxy_set_header X-Real-IP $remote_addr;
        add_header Access-Control-Expose-Headers "Content-Disposition"; // 关键配置
    }
}

response.setHeader("Content-Disposition", "attachment; filename=\"test.txt\"");
response.setHeader("Access-Control-Expose-Headers", "Content-Disposition");

// 使用 Fetch API 获取响应头并触发下载
fetch('https://api.example.com/download')
    .then(response => {
        // 获取 Content-Disposition 头
        const disposition = response.headers['content-disposition'];
        if (disposition && disposition.includes('attachment')) {
            const filename = disposition.split('filename=')[1].replace(/["']/g, '');
            return response.blob().then(blob => {
                // 创建下载链接
                const url = window.URL.createObjectURL(blob);
                const a = document.createElement('a');
                a.href = url;
                a.download = filename;
                document.body.appendChild(a);
                a.click();
                a.remove();
                window.URL.revokeObjectURL(url);
            });
        }
        return response.json(); // 处理其他情况
    })
    .catch(error => console.error('Error:', error));