Laravel CORS with Fruitcake - reactjs

Question

I make react project with laravel Back-end ... I have a CORS problem, I do everything like on link below, with fruitcake.
Laravel 6 CORS policy issue with API
but still not working.
cors.php:
'paths' => ['api/*'],
/*
* Matches the request method. `[*]` allows all methods.
*/
'allowed_methods' => ['*'],
/*
* Matches the request origin. `[*]` allows all origins.
*/
'allowed_origins' => ['*'],
/*
* Matches the request origin with, similar to `Request::is()`
*/
'allowed_origins_patterns' => [],
/*
* Sets the Access-Control-Allow-Headers response header. `[*]` allows all headers.
*/
'allowed_headers' => ['*'],
/*
* Sets the Access-Control-Expose-Headers response header.
*/
'exposed_headers' => false,
/*
* Sets the Access-Control-Max-Age response header.
*/
'max_age' => false,
/*
* Sets the Access-Control-Allow-Credentials header.
*/
'supports_credentials' => false,
And, kernel middle-ware is:
protected $middleware = [
\App\Http\Middleware\TrustProxies::class,
\App\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
\Fruitcake\Cors\HandleCors::class,
];
what else could be the problem?

Answer 1

Here are some gotchas when using fruitcake/laravel-cors:
Put HandleCors middleware at the top of $middleware in app/Http/Kernel.php:
protected $middleware = [
\Fruitcake\Cors\HandleCors::class,
\App\Http\Middleware\TrustProxies::class,
\App\Http\Middleware\CheckForMaintenanceMode::class,
\Illuminate\Foundation\Http\Middleware\ValidatePostSize::class,
\App\Http\Middleware\TrimStrings::class,
\Illuminate\Foundation\Http\Middleware\ConvertEmptyStringsToNull::class,
];
Putting it at the bottom or somewhere between won't work because requests might be rejected by other middlewares with higher priority.
Do NOT die or exit in controller.
For example the following won't work:
Route::get('/cors-test', function() {
dd("This won't work");
});
Because Fruitcake\Cors\HandleCors::handle method adds relevant headers AFTER handling request:
Fruitcake\Cors\HandleCors.php
public function handle($request, Closure $next)
{
// --- omitted
// Handle the request
$response = $next($request); // <--- if you die here
if ($request->getMethod() === 'OPTIONS') {
$this->cors->varyHeader($response, 'Access-Control-Request-Method');
}
// you will never reach here
return $this->addHeaders($request, $response);
}
dump does not work either
Clear config cache after changing app/config/cors.php:
$ php artisan config:cache

Answer 2

The Fruitcake\Cors\HandleCors::class is troublesome. Just remove it from everywhere and add these 3 headers in api.php route file on the top.
header('Access-Control-Allow-Methods: GET, POST, PATCH, PUT, DELETE, OPTIONS');
header('Access-Control-Allow-Headers: Origin, Content-Type, X-Auth-Token, Authorization, Accept,charset,boundary,Content-Length');
header('Access-Control-Allow-Origin: *');

Answer 3

Add credentials: 'same-origin' to your request header in the react App

Answer 4

Actually ,just remove dd and die command from you code.

Answer 5

php artisan config:clear
php artisan route:clear
php artisan cache:clear
Make sure your permissions are setup correctly (eg. storage is writable)