Nov 1, 2023

Level 25

Cors Issue Laravel 10

Hi,

I have no idea why but files inside either public/images or public/models are being denied because of cors policy allow origin.

in the images dir, its just png & webp. In models they are glb format. I have tried to add the paths to them in cors.php but isn't working.

So, for context its Laravel 10 using sail The frontend is a preact site that connects via api to laravel. All api endpoints are working. The api sends a link to an image or model which it then tries to load and results in a cors error.

Laravel is on port 80 and the frontend is on port 8080/3000 (depending)

Cors file content is:

return [

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

'allowed_methods' => ['*'],

'allowed_origins' => ['*'],

'allowed_origins_patterns' => ['*'],

'allowed_headers' => ['*'],

'exposed_headers' => ['*'],

'supportedContentTypes' => [
    'model/gltf-binary',
    'application/json',
    'text/html',
],

'max_age' => 0,

'supports_credentials' => true,

];

Any help is appreciated :)

LaryAI

2 years ago

Level 58

The CORS issue in Laravel 10 can be resolved by adding the appropriate headers to the response. You can create a middleware to handle CORS headers and apply it to the routes or globally.

Here's an example of how you can create a middleware to handle CORS headers:

<?php

namespace App\Http\Middleware;

use Closure;

class CorsMiddleware
{
    public function handle($request, Closure $next)
    {
        $response = $next($request);

        $response->headers->set('Access-Control-Allow-Origin', '*');
        $response->headers->set('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE, OPTIONS');
        $response->headers->set('Access-Control-Allow-Headers', 'Content-Type, Authorization');

        return $response;
    }
}

To apply this middleware globally, you can add it to the $middleware property in the App\Http\Kernel class:

protected $middleware = [
    // ...
    \App\Http\Middleware\CorsMiddleware::class,
];

Alternatively, you can apply the middleware to specific routes by adding it to the $routeMiddleware property in the App\Http\Kernel class:

protected $routeMiddleware = [
    // ...
    'cors' => \App\Http\Middleware\CorsMiddleware::class,
];

Then, you can use the middleware in your routes:

Route::group(['middleware' => 'cors'], function () {
    // Your routes here
});

Make sure to clear the cache after adding the middleware by running the following command:

php artisan route:cache

This should resolve the CORS issue and allow requests from any origin.

1 like

wahidulalam

2 years ago

Level 1

@LaryAI Hi I followed this but still not working on Laravel 10. it shows

Access to XMLHttpRequest at 'https://xyz.com/api/admin/product/' from origin 'https://demo.xyz.com' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: Redirect is not allowed for a preflight request.

karu

2 years ago

Level 1

@wahidulalam Hi, manage to find the solution after watching this [CORS in Laravel & Sanctum] from the YTber cdruc

i simply added the exactly path for my route. in my case 'paths' => ['/api/login'], the rest i put to ['*'] as he said should be default in the video. i was also dumb and forgot to add the port number in my URI link in the front end but it finally works. I hope this solve your issues too!

1 like

PapaRascal2020

2 years ago

Level 25

Update so far: I have managed to get it working but creating a web endpoint that serves the file with response()->file() however if anybody has a better way, would love to know :)

hayatics

2 years ago

Level 1

I've found another solution through that AI response, but in Laravel way.

In app/Http/Kernel.php

    protected $middleware = [
        \Illuminate\Http\Middleware\HandleCors::class,
		....
    ];
    protected $routeMiddleware = [
		...
        'cors' => \Illuminate\Http\Middleware\HandleCors::class
    ];

In my config/cors.php

<?php
return [
    'paths' => ['api/*'],
    'allowed_methods' => ['*'],
    'allowed_origins' => ['*'], //add your allowed origins
    'allowed_origins_patterns' => [],
    'allowed_headers' => ['*'],
    'exposed_headers' => [],
    'max_age' => 0;
    'supports_credentials' => false,
];

In my routes/api.php

Route::group(['middleware' => 'cors'], function () {
    Route::get('public-post-list', [PostController::class, 'postList']);
});

Hope this may help someone. :)

1 like

Dhiv

2 years ago

Level 1

@hayatics This works when I am sending GET requests. But for POST requests encountering the same No 'Access-Control-Allow-Origin' header is present on the requested resource.

1 like

chithract

1 year ago

Level 1

@hayatics \Illuminate\Http\Middleware\HandleCors: is a global middleware. Should it work for all routes?

Please or to participate in this conversation.