Symfony 3环境下Cordova应用获取图片时出现MissingAllowOriginHeader跨域错误求助

问题分析 #

你遇到的情况很典型：常规API请求（比如/api/updates/15151）能正常拿到跨域响应头，但/medias/路径下的图片却报MissingAllowOriginHeader错误。这大概率是因为图片请求被Web服务器（Apache/Nginx）直接处理了，完全绕过了Symfony内核——Nelmio CORS Bundle是在Symfony层面添加跨域头的，请求没经过Symfony的话，它的配置自然起不了作用。

解决步骤 #

1. 先确认问题根源 #

检查你的Web服务器配置，比如Nginx里通常会有这类规则：

location ~* \.(jpg|jpeg|png|gif)$ {
    expires 30d;
    access_log off;
}

或者Apache的.htaccess里会优先允许访问已存在的静态文件，跳过Symfony的入口文件。这类规则会让/medias/下的图片直接被服务器返回，Symfony根本没机会介入添加CORS头。

2. 方案一：让图片请求走Symfony路由（推荐） #

修改Symfony配置，把/medias/路径的请求交给控制器处理，这样Nelmio CORS的配置就能正常生效：

• 创建一个媒体控制器，负责返回图片文件：

// src/AppBundle/Controller/MediaController.php
namespace AppBundle\Controller;

use Symfony\Bundle\FrameworkBundle\Controller\Controller;
use Symfony\Component\HttpFoundation\BinaryFileResponse;
use Symfony\Component\HttpFoundation\ResponseHeaderBag;
use Symfony\Component\Routing\Annotation\Route;

class MediaController extends Controller
{
    /**
     * @Route("/medias/images/item/{id}/{filename}", name="media_image")
     */
    public function imageAction($id, $filename)
    {
        // 替换成你实际的图片存储路径
        $filePath = $this->getParameter('kernel.project_dir') . '/web/medias/images/item/' . $id . '/' . $filename;
        
        if (!file_exists($filePath)) {
            throw $this->createNotFoundException('图片不存在');
        }
        
        $response = new BinaryFileResponse($filePath);
        $response->setContentDisposition(ResponseHeaderBag::DISPOSITION_INLINE);
        
        return $response;
    }
}

• 调整Web服务器配置，让所有/medias/请求转发到Symfony入口文件，比如Nginx修改为：

location / {
    try_files $uri $uri/ /app.php$is_args$args;
}

# 注释掉原来直接处理图片的规则，或者调整优先级让Symfony先接管
# location ~* \.(jpg|jpeg|png|gif)$ {
#     expires 30d;
#     access_log off;
# }

这样所有/medias/下的请求都会经过Symfony，Nelmio CORS的跨域头就会被正常添加。

3. 方案二：直接在Web服务器层面加CORS头 #

如果不想修改Symfony路由，也可以直接在服务器配置里为/medias/路径添加跨域头：

Nginx配置示例：

location ^~ /medias/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods "POST, PUT, GET, DELETE, OPTIONS";
    add_header Access-Control-Allow-Headers *;
    add_header Access-Control-Max-Age 3600;

    # 处理OPTIONS预检请求，直接返回204
    if ($request_method = OPTIONS) {
        return 204;
    }

    # 正常返回静态文件
    expires 30d;
    access_log off;
}

Apache配置示例（.htaccess或虚拟主机配置）：

<Location "/medias/">
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "POST, PUT, GET, DELETE, OPTIONS"
    Header set Access-Control-Allow-Headers "*"
    Header set Access-Control-Max-Age "3600"
</Location>

# 处理OPTIONS预检请求
RewriteEngine On
RewriteCond %{REQUEST_METHOD} OPTIONS
RewriteRule ^(.*)$ $1 [R=200,L]

4. 验证配置 #

修改完成后，用浏览器开发者工具查看图片请求的响应头，确认Access-Control-Allow-Origin等跨域字段已经存在。同时记得清除Cordova WebView的缓存，避免旧的响应头干扰测试。

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