Laravel 11 API与Nuxt跨域问题：FilePond获取图片CORS报错

核心原因：静态存储文件请求未经过Laravel中间件 #

你请求的http://localhost:6060/storage/posts/...属于静态文件，默认由Web服务器（Nginx/Apache）直接处理，不会经过Laravel的路由和中间件链路，因此你配置的API中间件组、CORS规则完全不会作用在这个请求上。

具体解决方法 #

方法一：修改Web服务器配置，直接给静态文件添加CORS头 #

针对Nginx：

在Laravel站点的Nginx配置server块中添加以下规则：

location /storage/ {
    add_header Access-Control-Allow-Origin *;
    add_header Access-Control-Allow-Methods GET, POST, OPTIONS;
    add_header Access-Control-Allow-Headers Content-Type;
    # 处理OPTIONS预检请求
    if ($request_method = OPTIONS) {
        return 204;
    }
}

修改后重启Nginx，所有/storage/路径的请求都会自动带上CORS响应头。

针对Apache：

在项目根目录的.htaccess文件中添加：

<IfModule mod_headers.c>
    Header set Access-Control-Allow-Origin "*"
    Header set Access-Control-Allow-Methods "GET, POST, OPTIONS"
    Header set Access-Control-Allow-Headers "Content-Type"
</IfModule>

<IfModule mod_rewrite.c>
    RewriteEngine On
    # 处理OPTIONS预检请求
    RewriteCond %{REQUEST_METHOD} OPTIONS
    RewriteRule ^(.*)$ $1 [R=204,L]
</IfModule>

方法二：通过Laravel路由代理静态文件请求 #

让静态文件请求走Laravel的API路由，从而触发中间件的CORS配置：

1. 在routes/api.php中添加代理路由：

use Illuminate\Support\Facades\Storage;
use Illuminate\Http\Request;

Route::get('/storage/{path}', function (string $path, Request $request) {
    // 校验文件存在性，避免报错
    if (!Storage::disk('public')->exists($path)) {
        abort(404);
    }

    $fileContent = Storage::disk('public')->get($path);
    $mimeType = Storage::disk('public')->mimeType($path);

    return response($fileContent)
        ->header('Content-Type', $mimeType);
})->where('path', '.*')->middleware('api');

2. 前端修改图片请求URL为http://localhost:6060/api/storage/posts/1/1723106467-3475757-1.jpg，这样请求会经过API中间件组，自动带上你配置的CORS头。

额外检查项 #

• 确认Laravel内置的HandleCors中间件已注册到api和web中间件组：在app/Http/Kernel.php的$middlewareGroups中，确保\Illuminate\Http\Middleware\HandleCors::class存在于web和api数组内。
• 检查自定义ForceJsonResponse中间件的逻辑，确保它正确设置了CORS头，并且已添加到api中间件组。
• 清除浏览器缓存或使用无痕模式测试，避免旧的响应头缓存干扰结果。

内容的提问来源于stack exchange，提问作者Can-Kar