在前端项目中，我们经常需要从 OSS（对象存储服务）中加载文件进行预览，比如使用 iframe 嵌入一个 html 地址、pdf 地址等；有时点击链接后，浏览器却直接触发了下载，而不是在页面中打开。本文将详细讲解原因和解决方法。

一、问题

点击 OSS 文件链接（例如 PDF、html）后，浏览器自动下载文件，而不是打开预览页面。
在浏览器开发者工具中查看该请求，可以看到响应头中包含：

Content-Disposition: attachment;

1.1 问题原因

Content-Disposition 是一个 HTTP 响应头，用来指示浏览器如何处理返回的内容：

值	含义
inline	表示内容可以直接在浏览器中内嵌预览
attachment	表示内容应当被当作附件下载

浏览器接收到 attachment 时，会自动下载文件而不是显示在窗口中。
因此，只要 OSS 响应头中带有：

Content-Disposition: attachment

浏览器就不会预览，而是直接触发下载。

1.2 影响

• 无法在浏览器地址栏直接预览 PDF、html、图片等资源；

• <iframe>、<object> 无法正常展示；

• 移动端内嵌浏览器会弹出“保存文件”提示

1.3 解决方案：服务端修改响应头

正确的做法是在服务端修改文件的 Meta 信息或签名 URL 的响应头，让浏览器使用 inline 模式。

方法 1：修改 OSS 文件元信息（Meta）

如果文件是固定存放在 OSS 上的，可以直接修改该文件的响应头配置：

方法 2：生成签名 URL 时覆盖响应头

如果是通过后端接口或 SDK 生成带签名的下载地址，可以在生成链接时覆盖 Content-Disposition

二、为什么图片带 attachment 仍能在 <img> 中预览？

在调试中你可能会发现：

• 同一个文件（例如 .jpg），

• 响应头中明明是 Content-Disposition: attachment，

• 直接访问 URL 会触发下载，

• 但放进 <img> 标签里却能正常显示。

这并不是浏览器的“漏洞”，而是因为浏览器根据请求上下文（Context）不同会采取不同的策略。

2.1  浏览器的上下文差异

类型	示例	浏览器处理逻辑
顶层导航（Top-level Navigation）	地址栏访问、<a href> 点击	严格执行 attachment → 下载
嵌入上下文（Embedded Context）	<iframe>、<object>	多数遵守 attachment（下载）
子资源上下文（Subresource Context）	<img>、<video>、<link>、<script>	忽略 attachment，正常加载

也就是说，当浏览器知道这是一个被页面引用的图片资源时，会出于渲染兼容考虑直接显示图片，即使响应头要求“下载”。

<img src="https://oss.com/test.jpg" />

浏览器此时的行为是：

• 当前请求是页面渲染中的“子资源请求”；

• 浏览器认为开发者的意图是加载图片；

• 因此即使响应头中有 Content-Disposition: attachment，也会显示。

但如果是：

<a href="https://oss.com/test.jpg">点击查看图片</a>

点击后属于“顶层请求”，浏览器会严格遵守 attachment，并触发下载。

浏览器的这种行为是安全性与兼容性的折中：

• 对顶层请求，严格执行 attachment，防止 XSS、文件劫持等风险；

• 对页面渲染资源，放宽限制，以确保网页正常工作。

三、 特殊的标签

3.1 <iframe> /<object> / <embed>

• 常用于嵌入 html、 PDF、SWF；

• 浏览器大多会遵守 attachment；

• 所以嵌入带 attachment 的 PDF 时，会直接下载。

• 我特意测试了，使用 iframe 嵌入 attachment 类型的图片，也会走下载逻辑

3.3 <video> + <source>

• 如果主视频地址带 attachment，浏览器仍能播放；

• 但下载行为（右键另存为）仍然触发 attachment。

3.4 标签 attachment 规则一览

标签	是否忽略 attachment	典型用途
<img>	✅	图片展示
<video>	✅	视频播放
<audio>	✅	音频播放
<script>	✅	JS 脚本
<link>	✅	样式/字体
<iframe>	⚠️ 否（HTML/PDF /图片下载）
<object>	⚠️ 否
<embed>	⚠️ 否
<a>	❌	超链接（下载）
<form>	❌	提交表单（下载）

总结

• Content-Disposition: attachment → 浏览器强制下载；

• 某些标签（<img>、<video>、<audio>）可绕过下载机制；

• 不同文件类型的浏览器行为各异；

• 最佳实践：按文件用途配置响应头；

• 修改服务端配置是唯一稳定且通用的解决方案。