CORB blocked cross-origin response <URL> with MIME type text/html

Question

I'm using Laravel 9 and Vue js 3, I have 2 projects running on my localhost, one is running on port 8000 and the other is running on port 8001, What I wanted to do is to get the image from 8001 and display it in 8000, but CORB has blocked it saying that the content type is text/html, why is it text/html ? because I made a request to get the image, not text/html.

The image on the 8001 is a submitted data by user, so in the 8001 project, I have a multipart form that consists of text and image, and it will save the data to the database, like this

method in controller

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' ,);
}

and In the 8000 project, I'm calling the image like this

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

I have created a symbolic link so that is is accessible, and I also have enabled the CORS, to both domain, but it still got blocked, can somebody help me with this, is the problem with the CORS or the content-type ? because Laravel 9 has a default CORS.

Answer 1

If you've made the symbolic link with php artisan storage:link, then the url you should be using is not /storage/app/public/{image}. It's /storage/{image}.

https://laravel.com/docs/9.x/filesystem#the-public-disk

I think your request ends up being text/html because it's throwing a 404.

---

By default, storeAs will use the default disk. You could pass the public disk as a third argumeent.

https://laravel.com/docs/9.x/filesystem#specifying-a-disk

$image->storeAs('images', $imageName, 'public');

---

With that done, you should be able to access the image with

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