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 APIbut 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?
Best Answer
Here are some gotchas when using fruitcake/laravel-cors:
- Put
HandleCorsmiddleware at the top of$middlewareinapp/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 hereif ($request->getMethod() === 'OPTIONS') {$this->cors->varyHeader($response, 'Access-Control-Request-Method');}// you will never reach herereturn $this->addHeaders($request, $response);}dump does not work either
- Clear config cache after changing
app/config/cors.php:
$ php artisan config:cacheThe 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: *');php artisan config:clearphp artisan route:clearphp artisan cache:clearMake sure your permissions are setup correctly (eg. storage is writable)
Actually ,just remove dd and die command from you code.
Add credentials: 'same-origin' to your request header in the react App