资源被解释为 Document 但使用 MIME 类型 application/zip 传输答案

【问题标题】：Resource interpreted as Document but transferred with MIME type application/zip资源被解释为 Document 但使用 MIME 类型 application/zip 传输
【发布时间】：2011-09-29 01:35:12
【问题描述】：

对于 Chrome 12.0.742.112，如果我使用以下标头重定向：

HTTP/1.1 302 Found 
Location: http://0.0.0.0:3000/files/download.zip
Content-Type: text/html; charset=utf-8
Cache-Control: no-cache
X-Ua-Compatible: IE=Edge
X-Runtime: 0.157964
Content-Length: 0
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-02-18)
Date: Tue, 05 Jul 2011 18:42:25 GMT
Connection: Keep-Alive

如果跟随返回以下标题：

HTTP/1.1 200 OK 
Last-Modified: Tue, 05 Jul 2011 18:18:30 GMT
Content-Type: application/zip
Content-Length: 150014
Server: WEBrick/1.3.1 (Ruby/1.9.2/2011-02-18)
Date: Tue, 05 Jul 2011 18:44:47 GMT
Connection: Keep-Alive

Chrome 不会重定向，也不会更改上一页，它只会在控制台中报告以下警告：

资源解释为文档，但使用 MIME 类型 application/zip 传输。

该过程在 Firefox 中正常运行，如果我打开一个新标签并直接转到 http://0.0.0.0:3000/files/download.zip，在 Chrome 中也可以正常运行。我做错了什么，还是这是 Chrome 的错误/怪癖？

【问题讨论】：

相关：Chrome says "Resource interpreted as script but transferred with MIME type text/plain.", what gives?

标签： javascript google-chrome

【解决方案1】：

您可以在标记中指定 HTML5 download 属性。

<a href="http://example.com/archive.zip" download>Export</a>

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#attr-download

【讨论】：

"download" 属性在 ie 或其他浏览器中不受支持。如果您有其他选择，请帮助我
这修复了 Chrome，但会破坏其他浏览器。我的 Android 手机无法从那种链接下载。
叹息。 此“修复”不适用于大多数浏览器 - 仅适用于 Chrome。现在是 2016 年，所以也不要指望它很快。
在 Chrome 2019 中没有影响
@all 现在是 2035 年（我来自未来），没有电脑支持。

【解决方案2】：

在您的请求标头中，您发送了Content-Type: text/html，这意味着您希望将响应解释为 HTML。现在，即使服务器向您发送 PDF 文件，您的浏览器也会尝试将其理解为 HTML。那就是问题所在。我正在寻找可能是什么原因。 :)

【讨论】：

我尝试将其作为Content-Type: application/zip 发送但无济于事，它仍然尝试将其作为“文档”处理。可能还值得指出的是，zip URL 在我的应用程序中是动态的，因此与缓存无关。
谢谢！这可能与 Chrome 将Accept 请求标头作为text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 发送有关吗？我完全被难住了，我真的！
不，在 text/html,application/xhtml+xml,application/xml;q=0.9,*/*;q=0.8 中有一部分说 Chrome 接受几乎所有内容 (*/*)。
你在说什么？问题中没有请求标头。它们都是响应头。
我坐在这里想知道为什么这应该是一个答案而不是评论？

【解决方案3】：

我在任何地方都找不到消息本身的解释。这是我的解释。

据我了解，Chrome 期待一些它可能显示的材料（文档），但它获得了一些它无法显示的东西（或者它被告知不显示的东西）。

这既是一个问题，即如何在href 中的 HTML 页面级别声明文档（请参阅 Roy 消息中的 download 属性）以及如何通过 HTTP 标头（特别是Content-Disposition)。这是一个契约的问题，而不是希望和期望。

为了继续埃文的道路，我经历过：

Content-type: application/pdf
Content-disposition: attachment; filename=some.pdf

只是不一致与：

<a href='some.pdf'>

Chrome 会哭资源被解释为文档但已传输...

实际上，attachment 配置只是意味着：浏览器不应解释链接，而是将其存储在某个地方以用于其他隐藏目的。在上面，download 在href 旁边丢失，或者Content-disposition 必须从标题中删除。这取决于我们是否希望浏览器呈现文档。

希望这会有所帮助。

【讨论】：

【解决方案4】：

我在提供 PDF 文件（MIME 类型应用程序/pdf）时遇到了这个问题，并通过设置 Content-Disposition 标头解决了这个问题，例如：

Content-Disposition: attachment; filename=foo.pdf

希望对您有所帮助。

【讨论】：

但是在哪里写呢？
@coder 你从你的网络服务器添加这样的标题。不确定您使用的是什么，因此很难提供更多信息。您的服务器使用什么语言或框架？
在我们的标题中有这个，但 Chrome 仍然会抛出警告
不，它没有修复 chrome 版本 76.0.3809.132（官方构建）（64 位）上的任何内容我已经附加了标题

【解决方案5】：

我已经解决了这个问题……只需打开一个新标签。

为什么它不起作用我不完全确定，但这可能与 Chrome 如何处理页面上的多个下载有关，也许它认为它们是垃圾邮件并忽略了它们。

【讨论】：

你“打开了一个新标签”是什么意思？？？您手动打开了一个新的浏览器窗口并在其中粘贴了下载 URL？
是的，完全正确。我认为这是特定选项卡的应用程序状态中的错误。
我不希望用户打开一个新标签...而且我也不觉得打开一个下载文件很优雅。
@Joram 等。人。 - 打开一个选项卡进行下载（使用目标'_blank'） - 不能解决问题，它只是将“资源解释为文档”控制台警告消息传输到新选项卡。偷偷摸摸不是解决办法。
这显然不能解决原来的答案。说真的......我会在用户文档中输入什么“复制网址，打开一个新标签，粘贴网址，......”？业务下滑。

【解决方案6】：

我在通过 Javascript 执行文件下载时遇到了类似的问题。添加下载属性没有区别，但添加 target='_blank' 确实 - 我不再收到“资源解释为文档...”控制台消息。

这是我非常简单的代码：

var link = document.createElement('a');
link.target = '_blank';
link.href = url;
document.body.appendChild(link); // Required for Firefox
link.click();
link.remove();

我没有尝试过直接使用 HTML，但希望它可以工作。

请注意，我发现 Firefox 需要将链接附加到文档中，而 Chrome 则不需要它。

【讨论】：

只是一个警告，a target = '_blank' 将触发 IE 11 的弹出防止机制...
仅供参考，我确实在 Chrome（版本 87.0.4280.141，64 位）中使用直接 HTML 对其进行了测试，但它不起作用。

【解决方案7】：

我今天在使用 node.js / express.js 应用程序的 Chrome 版本 30.0.1599.66 时遇到了同样的问题。

标题是正确的，express 会自动正确设置它们，它可以在其他浏览器中工作，如所示，放置 html 5 'download' 属性无法解析，做了什么它将进入 chrome 高级设置并选中“下载前询问每个文件的保存位置”框。

在此之后没有报告“资源解释为文档....”错误，如该问题的标题所示，因此 我们的 服务器代码似乎是正确的，是 Chrome 报告错误当控制台设置为自动将文件保存到某个位置时出现该错误。

【讨论】：

【解决方案8】：

我在 iframe 中分配 src="image_url" 时遇到了这个问题。似乎 iframe 将其解释为文档，但事实并非如此。这就是它显示警告的原因。

【讨论】：

你能告诉我你是怎么解决的吗？因为我在使用 iframe 时遇到了同样的问题
我使用了表单数据：var photoData = new FormData();，然后在我的 ajax 请求中设置了属性contentType: false。发布请求将为：Content-Disposition: form-data; 内容类型为Content-Type: text/html

【解决方案9】：

我通过adding target="_blank"链接解决了这个问题。这样，即使在响应模式下，chrome 也会打开一个新选项卡并加载 PDF 而不会发出警告。

【讨论】：

我这样做了，它成功了：window.open(href, '_blank'); 并且新标签在下载后自动关闭。

【解决方案10】：

刚刚遇到这个问题，我能找到的其他信息都没有帮助：这是一个愚蠢的错误：我在开始下载文件之前将输出发送到浏览器。令人惊讶的是，我没有发现任何有用的错误（例如“标头已发送”等）。希望这可以减轻其他人的痛苦！

【讨论】：

【解决方案11】：

我在一个 ASP 网站项目中遇到了这个问题。添加“Content-Length”标头会导致在 Chrome 中重新开始下载。

【讨论】：

【解决方案12】：

此问题在 Chrome 61 版本中再次出现。但它似乎已修复为 Chrome 62。

我有一个如下所示的 RewriteRule

RewriteRule ^/ShowGuide/?$ https://<website>/help.pdf [L,NC,R,QSA]

使用 Chrome 61，PDF 无法打开，在控制台中显示消息

"Resource interpreted as Document but transferred with MIME type application/pdf: "

我们尝试如下在重写规则中添加 mime 类型，但没有帮助。

RewriteRule ^/ShowGuide/?$ https://<website>/help.pdf [L,NC,R,QSA, t:application/pdf]

我已将我的 Chrome 更新到最新的 62 版本，它再次开始显示 PDF。但该消息仍在控制台中。

对于所有其他浏览器，它曾经/正在正常工作。

【讨论】：

【解决方案13】：

问题

我有类似的问题。在js中得到消息

资源解释为文档，但使用 MIME 类型 text/csv 传输

但我在 chrome 控制台中也收到了消息

混合内容：“https://my-site/”站点已加载通过安全连接，但文件位于 'https://my-site/Download?id=99a50c7b' 通过不安全的连接重定向。这个文件应该是通过 HTTPS 提供服务。此下载已被阻止

这里说您需要使用安全连接（但奇怪的是，消息中的方案是 https ......）。

问题在于用于文件下载的 href 是在服务器端构建的。在我的例子中，这个href使用了http。

解决方案

所以我在构建文件下载的href时将方案更改为https。

【讨论】：

【解决方案14】：

在我的情况下，文件名太长，并且得到了同样的错误。一旦缩短到 200 个字符以下就可以正常工作。（限制可能是 250？）

【讨论】：

【解决方案15】：

在下载了几个 csv 文件（大量测试）后，chrome 询问是否允许从此页面进行更多下载。我只是关闭了窗口。之后chrome不再下载文件，但控制台说：

“资源被解释为文档，但以 MIME 类型 text/csv 传输”

我可以通过重启 chrome 来解决这个问题（完全是 Ctrl-Shift-Q）。

[更新] 不知道为什么这篇文章被删除，但它为我提供了解决方案。我早些时候收到了有关尝试下载多个文件的消息，并且肯定回答没有。在我重新启动浏览器之前，我收到了“资源解释...”消息；然后它完美地工作。在某些情况下，这可能是正确的答案。

【讨论】：

【解决方案16】：

我收到此错误是因为我是从我的文件系统提供服务的。一旦我开始使用 http 服务器 chrome 就可以弄清楚。

【讨论】：

【解决方案17】：

我在创建下载管理器时遇到了同样的问题。我遇到的问题是文件名太长，扩展名被剪掉了。

示例：文件名：组织协议和其他重要的事情.pd

<?php
  header("Content-Disposition: attachment; filename=$File_Name");
?>

解决方案：将 MySQL 数据库字段增加到 255 以存储文件名，并在保存 blob 之前执行长度检查。如果长度 > 255 将其修剪为 250 并添加文件扩展名。

【讨论】：

【解决方案18】：

试试下面的代码，我希望这对你有用。

var Interval = setInterval(function () {
                if (ReportViewer) {
                    ReportViewer.prototype.PrintReport = function () {
                        switch (this.defaultPrintFormat) {
                            case "Default":
                                this.DefaultPrint();
                                break;
                            case "PDF":
                                this.PrintAs("PDF");
                                previewFrame = document.getElementById(this.previewFrameID);
                                previewFrame.onload = function () { previewFrame.contentDocument.execCommand("print", true, null); }
                                break;
                        }
                    };
                    clearInterval(Interval);
                }
            }, 1000);

【讨论】：

【解决方案19】：

我今天遇到了这个问题，我的问题是我的Content-Disposition 标签设置错误。对于pdf 和application/x-zip-compressed 来说，您应该将其设置为inline 而不是attachment。

所以要设置您的标头，Java 代码将如下所示：

...
String fileName = "myFileName.zip";
String contentDisposition = "attachment";
if ("application/pdf".equals(contentType)
    || "application/x-zip-compressed".equals(contentType)) {
    contentDisposition = "inline";
}
response.addHeader("Content-Disposition", contentDisposition + "; filename=\"" + fileName + "\"");
...

【讨论】：

【解决方案20】：

问题

我从字面上引用了 Saeed Neamati (https://stackoverflow.com/a/6587434/760777)：

在您的请求标头中，您发送了 Content-Type: text/html 这意味着您希望将响应解释为 HTML。现在，即使服务器向您发送 PDF 文件，您的浏览器也会尝试将其理解为 HTML。

解决方案

发送该死的正确标题。发送文件的正确 mime 类型。期间！

怎么做？

啊啊。这完全取决于您在做什么（操作系统、语言）。

我的问题是在 javascript 中动态创建的下载链接。该链接用于下载 mp3 文件。 mp3 文件不是文档，pdf、zip 文件、flac 文件也不是文档，不胜枚举。

所以我创建了这样的链接：

<form method="get" action="test.mp3"> 
  <a href="#" onclick="this.closest(form).submit();return false;" target="_blank">
    <span class="material-icons">
      download
    </span>
  </a>
</form>

我把它改成了这样：

<form method="get" action="test.mp3" enctype="multipart/form-data"> 
  <a href="#" onclick="this.closest(form).submit();return false;" target="_blank">
    <span class="material-icons">
      download
    </span>
  </a>
</form>

问题解决了。向表单标签添加一个额外的属性解决了它。但是没有通用的解决方案。有很多不同的场景。当您从服务器发送文件时（您使用 CX#、Java、PHP 等语言动态创建它），您必须随其发送正确的标头。

附注：在发送标题之前，请注意不要发送任何内容（文本！）。

【讨论】：

【解决方案21】：

我也遇到了同样的错误，解决办法是把属性放上去

target = "_ blank"

最后：

<a href="/uploads/file.*" target="_blank">Download</a>

* 是要下载的文件的扩展名。

【讨论】：

这不是解决方案。它只是打开一个新选项卡并下载该选项卡中的文件。发生的任何错误/警告也会在该选项卡的调试控制台中报告，而不是在当前选项卡的调试控制台中报告。现在，您只是看不到问题所在。但是，实际上它并不固定。