Apache服务器上XMLHttpRequest的getResponseHeader返回null求助

核心原因分析 #

你遇到的问题主要来自两个关键点：

1. 同步XMLHttpRequest的浏览器限制：现代浏览器对主线程中的同步XHR有严格限制，可能导致请求异常或响应头无法正常读取。
2. CORS响应头未正确暴露Content-Length：跨域请求时，默认只有少数安全响应头能被前端访问，Content-Length不在默认列表中，必须显式配置服务器暴露该头。

具体解决方案 #

1. 修正JavaScript代码：改用异步请求 #

将同步请求改为异步，避免浏览器限制，同时提升代码兼容性：

// 异步版本：返回Promise方便后续处理
function getFileSize(url, key) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('HEAD', url, true);

        xhr.onload = function() {
            if (this.status === 200) {
                const fileSize = this.getResponseHeader('content-length');
                sizes[key] = fileSize;
                resolve(fileSize);
            } else {
                reject(`请求失败，状态码：${this.status}`);
            }
        };

        xhr.onerror = function() {
            reject('网络请求异常');
        };

        xhr.send();
    });
}

// 调用示例
// getFileSize('https://example.com/file.pdf', 'pdfFile')
//   .then(size => console.log('文件大小：', size))
//   .catch(err => console.error(err));

或者使用更现代的fetch API：

async function getFileSize(url, key) {
    try {
        const response = await fetch(url, { method: 'HEAD' });
        if (!response.ok) throw new Error(`请求失败：${response.status}`);
        
        const fileSize = response.headers.get('content-length');
        sizes[key] = fileSize;
        return fileSize;
    } catch (error) {
        console.error('获取文件大小失败：', error);
        throw error;
    }
}

2. 完善Apache的CORS配置 #

在Apache的配置文件（如httpd.conf）或站点目录下的.htaccess文件中添加以下配置：

# 允许指定来源跨域（建议替换*为你的前端域名，比如https://your-frontend.com）
Header set Access-Control-Allow-Origin "*"

# 关键：暴露Content-Length头给前端
Header set Access-Control-Expose-Headers "Content-Length"

# 允许HEAD、GET等必要请求方法
Header set Access-Control-Allow-Methods "HEAD, GET, OPTIONS"

# 处理OPTIONS预检请求
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

配置完成后重启Apache服务生效。

3. 额外排查点 #

• 确认目标文件返回Content-Length：用命令行工具（如curl）测试目标URL：

  curl -I https://your-target-url.com/file.ext
  

  检查响应头中是否存在Content-Length字段。如果没有，可能是服务器开启了gzip压缩导致返回Transfer-Encoding: chunked，可在Apache中关闭对应文件的压缩：

  <FilesMatch "\.(pdf|zip|mp4)$">
      SetEnv no-gzip 1
  </FilesMatch>
  

• 清除浏览器缓存：强制刷新页面（Ctrl+F5），避免缓存旧的响应头配置。

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