如何在 Javascript 中检查资源的 MIME 类型？答案

【问题标题】：How to check a resource's MIME type in Javascript?如何在 Javascript 中检查资源的 MIME 类型？
【发布时间】：2020-06-02 10:50:26
【问题描述】：

我正在尝试创建一个函数来检查用户提供的资源，以查看它是否是有效的音频文件。

我在这里找到的所有内容都与上传文件后检查文件的 MIME 类型有关。这不是我的目标。

//insert MIME type checking function here
const urlParams = new URLSearchParams(window.location.search);
const audioURL = urlParams('audiourl') // get audiourl from query (example.com/?audiourl=https://example.com/audio.wav)

if (mimetypecheck()) { // function to check mime type here 
    var audio = new Audio(audioURL);
    audio.play();
} else {
    //tell user invalid audio url, or unsupported audio type
}

【问题讨论】：

请看这个库npmjs.com/package/mime
不下载文件就无法检查类型，所以你不妨检查一下音频是否开始播放。特别是因为检查 MIME 类型并不完全可靠。
@GuyIncognito 理论上你可以通过 HEAD 请求。
在您的示例中，“音频 URL”似乎来自同一个域，与运行此脚本的域相同。总是应该如此吗？如果没有，那么您可能宁愿忘记使用客户端 JavaScript 来实现这一点 - 您的用户可能在此处输入的大多数“野外”任意 URL 可能不会启用 CORS。
示例音频 url 应该是用户输入的内容。他们输入的网址可以是任何@CBroe

标签： javascript mime-types

【解决方案1】：

正如在 cmets 中所说，检查资源是否指向某些可播放媒体的唯一方法是实际尝试播放它。

MIME 类型不会告诉您太多信息，此外对于音频/视频媒体：
您不能 100% 确定容器（由 MIME 类型声明）真正包含的内容，它很可能被编码在浏览器无法解码的编解码器中，即使它包装在浏览器的容器中应该知道。

这意味着即使一个简单的 HEAD 请求可以告诉您服务器将在 Content-Type 标头中发送的某些 URL 的内容，但这并不能准确地告诉您浏览器是否能够播放它。并且鉴于大多数服务器无论如何都不会让您阅读这些标头，因此不值得尝试实现此功能。

对于你的情况，最好的办法就是尝试玩它。

所以你可以将你的代码重写为

const urlParams = new URLSearchParams(window.location.search);
const audioURL = urlParams('audiourl') // get audiourl from query (example.com/?audiourl=https://example.com/audio.wav)

const audio = new Audio(audioURL);
audio.onerror = (evt) => {
  //tell user invalid audio url, or unsupported audio type
};
audio.play();

请注意，我们也可以绑定到由 HTMLMediaElement.play() 方法返回的 Promise 的 catch() 方法，但它实际上可能因其他原因而触发（例如，如果用户之前从未在 Chrome 中与页面进行过交互），或者如果此代码不是直接响应 Safari 中的用户手势）。如果您确定只有无效的 URL 可能是无法播放的原因，那么您可以这样做

const audio = new Audio(audioURL);
audio.play().catch( () => {
  //tell user invalid audio url, or unsupported audio type
});

【讨论】：