People searching “Laravel S3 temporary URL Vue” set the object public because the img tag 403s. Keep the object private. Hand the page a URL that expires. The upload guide is the public disk. This page is the private one.
TL;DR
- temporaryUrl gives Vue a short link to a private object.
- Do not make the bucket public to fix an img tag.
- Do not pass
cover_pathto Vue and build the S3 URL in the component. - Do not cache the HTML of this page for an hour.
The fix#
'cover' => Storage::disk('s3')->temporaryUrl(
$post->cover_path,
now()->addMinutes(5),
),The Vue page uses it as src. Five minutes later the image request fails, which is the point. Generate the URL when you render, not when you upload, and do not store it in the database.
The disk needs the S3 key in .env, not in a VITE_ variable. The browser never sees that key. It sees the signed URL.
What to avoid#
Gotcha
Do not pass cover_path to Vue and build the S3 URL in the component. You would publish the bucket layout, and you still could not sign it without the secret. Do not cache the HTML of this page for an hour. The URL inside it dies first.
FAQ#
How do I show a private S3 file for a few minutes?
temporaryUrl gives Vue a short link to a private object. Do not make the bucket public to fix an img tag.
What goes wrong with Laravel S3 temporary URL Vue?
Many developers set the object public because the img tag 403s. Do not pass cover_path to Vue and build the S3 URL in the component.
