Laravel9+Vue3跨域图片加载遇CORB拦截问题求助

问题背景 #

使用Laravel 9和Vue.js 3，本地两个项目分别运行在8000和8001端口。尝试从8001端口加载图片到8000端口展示时，遭遇CORB拦截，提示响应MIME类型为text/html，但请求的是图片资源。已创建Laravel存储符号链接并配置CORS，问题仍存在。

相关代码 #

8001端口项目的控制器store方法：

public function store(Request $request)
{
    $validatedData = $request->validate([
        'nama' => 'required',
        'alamat' => 'required',
        'nomor' => 'required',
        'email' => 'required|email',
        'image' => 'required|image',
    ]);

    $formulir = new Formulirs;
    $formulir->nama = $validatedData['nama'];
    $formulir->alamat = $validatedData['alamat'];
    $formulir->nomor = $validatedData['nomor'];
    $formulir->email = $validatedData['email'];

    $image = $request->file('image');
    $imageName = time().$image->getClientOriginalName();
    $image->storeAs('public/images', $imageName);
    $formulir->image = $imageName;

    $formulir->save();

    return response()->json('Data berhasil dikirim');
}

8000端口项目中图片调用代码：

<img :src="'http://localhost:8001/storage/app/public'+formulir.image">

核心问题 #

1. 图片URL路径错误（主要原因） #

Laravel的storage:link符号链接是将storage/app/public映射到项目根目录的public/storage，因此可通过Web访问的图片路径应为/storage/images/[图片名]，而非你当前使用的/storage/app/public/[图片名]。

当前错误的URL会导致服务器返回404错误页面（MIME类型为text/html），这就是CORB提示MIME类型不匹配的根本原因——你请求的是图片，但实际收到的是HTML错误页。

2. CORS配置验证（次要检查项） #

Laravel 9默认的CORS配置在config/cors.php，需确保以下配置正确：

• allowed_origins包含http://localhost:8000
• allowed_methods包含GET（图片请求为GET方法）
• allowed_headers包含常见请求头（或设为['*']临时测试）

解决方案 #

步骤1：修正图片URL路径 #

将Vue中的图片src修改为正确的访问路径：

<img :src="'http://localhost:8001/storage/images/' + formulir.image">

步骤2：确认存储符号链接有效性 #

重新执行Laravel存储链接命令，确保符号链接正确创建：

php artisan storage:link

步骤3：验证CORS配置 #

打开config/cors.php，调整配置如下：

return [
    'paths' => ['api/*', 'storage/*'], // 新增storage路径允许CORS
    'allowed_methods' => ['*'],
    'allowed_origins' => ['http://localhost:8000'],
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0,
    'supports_credentials' => false,
];

修改后重启8001端口的Laravel服务，使配置生效。

步骤4：测试图片访问 #

直接在浏览器地址栏访问http://localhost:8001/storage/images/[你的图片名]，确认能正常加载图片（返回正确的图片MIME类型，如image/jpeg）。如果能正常显示，再在8000端口的Vue项目中测试加载。

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