Laravel CORS Issue when dealing with image files inside public folder?

Question

So I store images inside my public folder inside a subdirectory called 'images', and I'm trying to make a request to one of them.

However, I constantly get the error;

Access to fetch at 'http://project.test/images/4obrUhRprw6CXSHsHEGEf4Gje2baKoiS7PQJvS4F.jpeg' from origin 'http://localhost:8080' has been blocked by CORS policy: No 'Access-Control-Allow-Origin' header is present on the requested resource. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

I think this is because I'm using VueJS as an SPA frontend, as if I head to project.test and make the request it works fine.

I'm using laravel-cors but after some research, I've found that apparently doesn't apply to the public folder, so I've tried playing around with the .htaccess file inside of public and this is what I've got;

<IfModule mod_rewrite.c>
    <IfModule mod_negotiation.c>
        Options -MultiViews -Indexes
    </IfModule>

    <IfModule mod_headers.c>
        SetEnvIf Origin "http(s)?://([^.]+\.)?(localhost:8080)$" AccessControlAllowOrigin=$0$1
        Header add Access-Control-Allow-Origin %{AccessControlAllowOrigin}e env=AccessControlAllowOrigin
        Header set Access-Control-Allow-Credentials true
    </IfModule>


    RewriteEngine On

    # Handle Authorization Header
    RewriteCond %{HTTP:Authorization} .
    RewriteRule .* - [E=HTTP_AUTHORIZATION:%{HTTP:Authorization}]

    # Redirect Trailing Slashes If Not A Folder...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_URI} (.+)/$
    RewriteRule ^ %1 [L,R=301]

    # Handle Front Controller...
    RewriteCond %{REQUEST_FILENAME} !-d
    RewriteCond %{REQUEST_FILENAME} !-f
    RewriteRule ^ index.php [L]
</IfModule>

However, it still doesn't appear to work and I get the same error when making a request from my Vue localhost instead of project.test. I should also note I'm using Valet.

Hopefully someone can give some help on this.

What’s the HTTP status code of the response? You can use the Network pane in browser devtools to check. Is it a 4xx or 5xx error rather than a 200 OK success response? — sideshowbarker, Oct 22 '19 at 02:41
@sideshowbarker The actual response of the image request is actually a 200, which is what confuses me even more. — Borassign, Oct 22 '19 at 02:46

score 3 · Answer 1 · edited Jul 16 '20 at 14:48

3

I put this line in .htaccess file:

Header always set Access-Control-Allow-Origin "*"

and it worked for me.

edited Jul 16 '20 at 14:48

Adrian Mole

49,934
160
51
83

answered Jul 16 '20 at 13:03

Hadeel Mostafa

31
2

score 3 · Answer 2 · answered Nov 09 '20 at 11:17

I had a similiar problem with following setup:

An enabled CorsMiddleware that worked as it is supposed to do with the different get, post, put etc. routes.
An images folder inside the "public"-folder of the lumen project. Accessing files inside the images folder would lead to an CORS error, although CorsMiddleware worked for routes.

Solution that worked for me: Based on the suggestion of @Hadeel Mostafa, I added a .htaccess file to the public/images folder with the following line:

Header always set Access-Control-Allow-Origin "*"

Adding the same line to the .htaccess of the public folder on the other hand didn't work. It caused the allow-origin header to be set twice (by CorsMiddleware and .htaccess). So the key in my case, was adding an own .htaccess to the subfolder.

Seriously....thank you so much for this answer. I spent hours working on this and this was the only way that I could get CORS images to load while using fruitcake-cors. — Sleewok, Jul 11 '22 at 20:06

score 1 · Answer 3 · answered Oct 22 '19 at 05:09

Add middleware with CORS

<?php
namespace App\Http\Middleware;

use Illuminate\Foundation\Http\Middleware\CheckForMaintenanceMode as Middleware;
use Closure;
use Illuminate\Support\Facades\Response;

class CORS extends Middleware {

    /**
     * Handle an incoming request.
     *
     * @param  \Illuminate\Http\Request  $request
     * @param  \Closure  $next
     * @return mixed
     */
    public function handle($request, Closure $next)
    {            
        $origin = $request->header('origin');
        $origin = $origin ?? '*';

        // ALLOW OPTIONS METHOD
        $headers = [
            'Access-Control-Allow-Origin' => $origin,
            'Access-Control-Allow-Methods'=> 'GET, POST, DELETE, PUT, OPTIONS, HEAD, PATCH',
            'Access-Control-Allow-Headers'=> 'Authorization,DNT,X-CustomHeader,Keep-Alive,User-Agent,X-Requested-With,If-Modified-Since,Cache-Control,Content-Type,Set-Cookie',
            'Access-Control-Allow-Credentials'=> 'true'
        ];

        if($request->getMethod() == "OPTIONS") {
            // The client-side application can set only headers allowed in Access-Control-Allow-Headers
            return Response::make('OK', 200, $headers);
        }

        $response = $next($request);

        foreach($headers as $key => $value) {
            $response->header($key, $value);
        }
        return $response;
    }

}

File app/Http/Kernel.php

protected $middleware = [
        // Your middleware...

        \App\Http\Middleware\CORS::class,        
    ];

I'm already using the package laravel-cors which basically does this. According to some research I did the public folder is not affected by middleware. — Borassign, Oct 24 '19 at 08:24

score 1 · Answer 4 · answered Jan 15 '21 at 15:59

1

An easier solution would be to use fruitcake/laravel-cors and edit this line in your cors.php config file:

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

to

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

Happy coding!

answered Jan 15 '21 at 15:59

Stan Smulders

6,079
1
27
23

score 1 · Answer 5 · answered Apr 01 '21 at 09:15

Add these lines at the top of bootstrap\app.php file. Actually, Middlewares only work with routes not in all requests so to allow it for all add code in where the app is bootstraped.

header('Access-Control-Allow-Origin: *');
header('Access-Control-Allow-Methods: *');
header('Access-Control-Allow-Headers: *');

for testing must refresh browser cache or go to incognito mode because browsers get response from the cache.

Laravel CORS Issue when dealing with image files inside public folder?

5 Answers5