Laravel中跨域访问图片被CORS拦截的问题求助

核心问题 #

你的CORS配置未覆盖静态资源（storage下的图片）的请求路径，同时中间件存在重复注册冲突，导致请求图片时CORS头未被正确添加。

具体问题点 #

1. 路径范围过窄：当前cors.php里的paths仅包含api/*和sanctum/csrf-cookie，而你请求的图片路径/storage/app/public/images/...不在该范围内，CORS中间件不会处理这类请求。
2. 中间件重复注册：同时添加了Illuminate\Http\Middleware\HandleCors和Fruitcake\Cors\HandleCors，两者冲突导致CORS头无法正常输出。

解决步骤 #

1. 更新CORS路径配置

修改config/cors.php中的paths，将静态资源路径纳入处理范围：

'paths' => ['api/*', 'sanctum/csrf-cookie', 'storage/*'],

如果需要覆盖所有请求，可直接设置为：

'paths' => ['*'],

2. 清理重复的CORS中间件

打开app/Http/Kernel.php，移除全局$middleware数组中的\Illuminate\Http\Middleware\HandleCors::class，仅保留Fruitcake的中间件：

protected $middleware = [
    // \App\Http\Middleware\TrustHosts::class,
    \App\Http\Middleware\TrustProxies::class,
    // 移除该行：\Illuminate\Http\Middleware\HandleCors::class,
    \App\Http\Middleware\PreventRequestsDuringMaintenance::class,
    \Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
    \App\Http\Middleware\TrimStrings::class,
    \Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
    \Fruitcake\Cors\HandleCors::class, // 仅保留此中间件
];

3. 优化来源配置（可选）

为提升安全性，建议将allowed_origins设置为具体的子域名而非通配符：

'allowed_origins' => ['https://photo.butuh.com'],

4. 清除配置缓存

执行命令确保配置生效：

php artisan config:clear

验证 #

修改完成后重新请求图片，检查响应头是否包含Access-Control-Allow-Origin: https://photo.butuh.com（或通配符*），存在则说明配置生效。

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