如何用JavaScript获取无扩展名媒体服务器URL的文件类型？

这种无扩展名的媒体服务URL确实挺常见的，我之前做媒体相关项目时也遇到过类似需求。下面分享几种靠谱的JavaScript实现方式，帮你确定它的实际媒体类型：

这是最可靠的方案，因为服务器在返回资源时，响应头里的Content-Type字段会明确标识资源的媒体类型。我们可以用HEAD请求（只获取响应头，不下载文件）来高效获取这个信息：

async function getMediaExtension(url) {
  try {
    // 用HEAD请求，避免下载整个媒体文件，节省带宽和时间
    const response = await fetch(url, { method: 'HEAD' });
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }
    
    const contentType = response.headers.get('Content-Type');
    if (!contentType) {
      return '无法获取媒体类型';
    }

    // 把常见的Content-Type映射成对应的扩展名
    const typeToExt = {
      'image/jpeg': '.jpg',
      'image/png': '.png',
      'image/gif': '.gif',
      'video/mp4': '.mp4',
      'video/webm': '.webm',
      'audio/mpeg': '.mp3',
      'audio/wav': '.wav',
      'audio/ogg': '.ogg'
      // 可以根据业务需求添加更多类型映射
    };

    return typeToExt[contentType] || `未知媒体类型：${contentType}`;
  } catch (error) {
    console.error('获取媒体扩展名出错：', error);
    return '获取失败';
  }
}

// 调用示例
getMediaExtension('/MediaServer?MediaID=SomeRandomMediaIDWithoutExtension')
  .then(ext => console.log('实际扩展名：', ext))
  .catch(err => console.error(err));

为什么优先用HEAD请求？因为它只返回响应头信息，不会下载整个媒体文件，对于大体积的视频、音频来说，性能优势特别明显。

如果服务器不支持HEAD请求，或者返回的Content-Type是application/octet-stream这种通用类型，我们可以读取文件的前几个字节（也就是文件的“魔数”或签名）来判断类型——这是更底层的判断方式：

async function getMediaExtensionByMagicNumbers(url) {
  try {
    const response = await fetch(url);
    if (!response.ok) {
      throw new Error(`请求失败，状态码：${response.status}`);
    }

    // 只读取文件的前10字节，足够判断大部分常见媒体类型
    const arrayBuffer = await response.arrayBuffer();
    const uint8Array = new Uint8Array(arrayBuffer.slice(0, 10));
    // 转成十六进制字符串方便匹配
    const hexSignature = Array.from(uint8Array)
      .map(byte => byte.toString(16).padStart(2, '0'))
      .join('');

    // 常见媒体文件的魔数映射
    const magicToExt = {
      'ffd8ffe0': '.jpg', // JPEG 文件签名
      '89504e47': '.png', // PNG 文件签名
      '47494638': '.gif', // GIF 文件签名
      '0000001866747970': '.mp4', // MP4 前8字节签名
      '1a45dfa3': '.webm', // WebM 文件签名
      '494433': '.mp3', // MP3 文件签名
      '52494646': '.wav' // WAV 文件签名
    };

    // 检查是否匹配已知的魔数
    for (const [magic, ext] of Object.entries(magicToExt)) {
      if (hexSignature.startsWith(magic)) {
        return ext;
      }
    }

    return '无法通过文件签名判断类型';
  } catch (error) {
    console.error('获取媒体扩展名出错：', error);
    return '获取失败';
  }
}

// 调用示例
getMediaExtensionByMagicNumbers('/MediaServer?MediaID=SomeRandomMediaIDWithoutExtension')
  .then(ext => console.log('实际扩展名：', ext))
  .catch(err => console.error(err));

这种方法的缺点是需要下载至少部分文件，对于大文件来说不够高效，而且魔数映射需要自己维护，覆盖的类型越多代码会越长。

• 跨域问题：如果你的前端页面和Media Server不在同一域名下，需要服务器配置CORS，允许HEAD或GET请求，否则浏览器会拦截跨域请求。
• Content-Type准确性：有些服务器可能会返回不准确的Content-Type（比如统一返回application/octet-stream），这时候就只能用魔数判断的方案了。
• 性能优先级：优先使用HEAD请求的方案，只有在万不得已的时候再考虑魔数判断。

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