Symfony 3.4图片接口通过img标签请求时返回406错误的解决

问题原因分析 #

1. Symfony格式协商冲突：Symfony 3.4的路由默认会根据请求Accept头做格式匹配。直接浏览器请求时，Accept头以image/*开头，优先级更高，Symfony自动适配图片响应；但Angular发起的请求中，Accept头以text/html开头（优先级高于image/*），Symfony尝试返回html格式，而你的控制器仅能返回二进制图片内容，无法提供html格式响应，因此触发406错误。
2. 请求类型异常：从请求头的Sec-Fetch-Dest: document可以看出，该请求并非标准图片资源请求（正常应为Sec-Fetch-Dest: image），大概率是Angular的路径配置有误，导致浏览器误将图片请求识别为页面导航请求。

解决方案 #

方案1：强制路由响应格式

修改Symfony路由，指定默认格式为图片类型，跳过格式协商：

/**
 * @Route("/provide/image/{filename}", defaults={"_format": "image"})
 */
public function provideImage($filename)
{
    $path = 'myimgdir/' . $filename;
    $response = new BinaryFileResponse($path);
    
    // 手动设置正确的MIME类型，避免自动检测异常
    $mimeType = mime_content_type($path);
    $response->headers->set('Content-Type', $mimeType);
    
    // 设置为内联显示，确保浏览器正确渲染图片
    $response->setContentDisposition(
        \Symfony\Component\HttpFoundation\ResponseHeaderBag::DISPOSITION_INLINE,
        $filename
    );
    
    return $response;
}

方案2：限制路由匹配的文件后缀

在路由中添加requirements规则，仅匹配图片后缀，避免与其他路由冲突：

/**
 * @Route("/provide/image/{filename}", requirements={"filename"=".+\.(jpg|jpeg|png|gif|webp|avif|svg)"})
 */
public function provideImage($filename)
{
    $path = 'myimgdir/' . $filename;
    $response = new BinaryFileResponse($path);
    return $response;
}

方案3：修正Angular的图片路径

检查Angular中img标签的src属性，确保使用绝对路径，避免被Angular的SPA路由拦截：

<!-- 完整域名路径 -->
<img src="https://your-domain.com/provide/image/xxx.jpg" alt="Image">
<!-- 或基于当前域名的根路径 -->
<img src="/provide/image/xxx.jpg" alt="Image">

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