若依框架图片预览异常：Content-Type变成application/octet-stream，前端后端谁的锅？
前言
在基于若依（RuoYi-Vue）框架开发后台管理系统时，图片无法在线预览、直接触发下载是一个超级常见的坑。
典型现象：
-
页面图片标签
<img>不显示，直接弹出文件下载框 -
F12 网络面板查看，图片接口响应头
Content-Type: application/octet-stream -
后端：肯定是前端改了响应头！
-
前端：响应头是后端返回的，我根本改不了！
一场扯皮就此开始......
今天这篇文章，彻底终结这个问题 ，告诉你：这既不是前端乱改，也不是玄学bug，就是后端代码/配置的固定问题，同时给出可直接复制的解决方案。
一、先把结论拍死：谁在修改 Content-Type？
100% 是后端（Java）控制的！
前端绝对无法修改接口响应头，浏览器的安全策略不允许。
Content-Type 是服务器告诉浏览器「我返回的是什么类型数据」的核心响应头，只能由后端代码、过滤器、拦截器、工具类设置。
出现application/octet-stream（二进制流），只有一个原因：
后端把图片当成了「下载文件」处理，而不是「可预览图片」返回。
二、若依框架下，90% 的人都踩过这 3 个坑
坑1：误用了若依自带的「文件下载工具类」
若依封装了FileUtils工具类，专门用于文件下载，它会强制设置：
Java
// 若依源码中，下载文件一定会设置这两个头
response.setContentType("application/octet-stream");
response.setHeader("Content-Disposition", "attachment;filename=xxx");只要你在图片预览接口里调用了下面任意方法，必出问题：
-
FileUtils.writeBytes() -
FileUtils.setAttachmentResponseHeader() -
FileUtils.download()
后果：浏览器认为这是附件，直接下载，不预览。
坑2：Controller 写法错误（最常见）
两个典型错误写法：
-
方法加了 @ResponseBody / 用 AjaxResult 返回
-
没有手动设置图片类型
错误示例：
Java
// 错误写法
@GetMapping("/preview")
@ResponseBody // 多余！会干扰流输出
public AjaxResult preview(String path){
// 直接用了下载工具 → 必变成 octet-stream
FileUtils.writeBytes(path, response.getOutputStream());
return AjaxResult.success();
}坑3：全局过滤器/拦截器覆盖了响应头
项目里如果有自定义过滤器，统一设置：
Java
response.setContentType("application/json;charset=utf-8");会直接覆盖你设置的image/jpeg，导致图片变成二进制流。
三、正确解决方案（可直接复制使用）
1. 正确的图片预览 Controller（标准写法）
Java
import org.springframework.web.bind.annotation.GetMapping;
import org.springframework.web.bind.annotation.PathVariable;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RestController;
import javax.servlet.ServletOutputStream;
import javax.servlet.http.HttpServletResponse;
import java.io.File;
import java.io.FileInputStream;
import java.net.URLEncoder;
/**
* 图片预览控制器（若依框架通用）
*/
@RestController
@RequestMapping("/image")
public class ImagePreviewController {
/**
* 图片在线预览
* 重点：返回值 void、不加@ResponseBody、手动设置图片ContentType
*/
@GetMapping("/preview/{fileName}")
public void preview(@PathVariable String fileName, HttpServletResponse response) throws Exception {
// 1. 获取真实文件路径（根据你项目的文件存储配置修改）
String realPath = "D:/upload/" + fileName;
File file = new File(realPath);
// 2. 设置响应头 = 关键！！！
// 告诉浏览器：这是图片，直接预览，不下载
response.setContentType(getContentType(fileName)); // image/jpeg,image/png等
response.setHeader("Content-Disposition", "inline;filename=" + URLEncoder.encode(fileName, "UTF-8"));
// 3. 输出流
try (FileInputStream fis = new FileInputStream(file);
ServletOutputStream os = response.getOutputStream()) {
byte[] buffer = new byte[1024];
int len;
while ((len = fis.read(buffer)) != -1) {
os.write(buffer, 0, len);
}
os.flush();
}
}
/**
* 根据文件名后缀自动返回正确的图片 ContentType
*/
private String getContentType(String fileName) {
String ext = fileName.substring(fileName.lastIndexOf(".") + 1).toLowerCase();
switch (ext) {
case "jpg":
case "jpeg":
return "image/jpeg";
case "png":
return "image/png";
case "gif":
return "image/gif";
case "bmp":
return "image/bmp";
default:
return "application/octet-stream";
}
}
}2. 必须遵守 4 条规则
-
返回值必须是 void，不要返回 AjaxResult
-
不要加 @ResponseBody
-
必须手动设置 setContentType
-
绝对不要调用若依的 FileUtils 下载方法
四、快速排查思路（1 分钟定位问题）
-
F12 打开浏览器控制台 → Network
-
找到图片请求，查看 Response Headers
-
如果
Content-Type: application/octet-stream
✅ 证明后端返回错误
- 如果
Content-Type: image/jpeg但仍然下载
✅ 检查Content-Disposition是否为inline
前端能做什么？
前端什么都不用改！只要后端返回正确的头，<img :src="url"> 自动正常显示。
五、总结（一句话解决扯皮）
图片预览变成 application/octet-stream 并触发下载，100% 是后端代码问题，与前端无关！
核心原因：
-
用了下载工具类
-
没设置正确的图片响应头
-
Controller 写法不规范
-
全局过滤器覆盖响应头
照着文章里的标准预览Controller复制修改，问题直接解决！