如何为自定义预加载链接指定MIME类型

没法在不修改服务器设置的情况下覆盖服务器返回的媒体类型。

原因很直接：<link rel="preload">里的type属性只是给浏览器一个预期的资源类型提示——用来判断是否需要预加载该资源（比如浏览器不支持对应类型就跳过）、设置加载优先级，但它完全不会改变服务器实际返回的Content-Type响应头，浏览器最终还是会以服务器返回的octet-stream来识别这个资源。

不过你可以换个思路绕开这个问题：用fetch主动请求资源时，强制把响应体解析成文本，不管服务器返回的类型是什么。配合预加载的话，步骤如下：

1. 保留预加载标签（可以去掉type，因为它不影响实际解析）：

<link rel="preload" href="myfile.xxx" as="fetch">

2. 用fetch请求并强制解析为文本：

fetch('myfile.xxx')
  .then(res => res.text()) // 强制把响应按UTF-8文本处理
  .then(content => {
    // 在这里处理你的文本内容
    console.log(content);
  });

这样即使服务器返回octet-stream，你也能正常获取到文本内容，同时也利用了预加载提升加载速度。

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