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.
'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?
The laravel-cors package allows you to send Cross-Origin Resource Sharing headers with Laravel middleware configuration. If you want to have a global overview of CORS workflow, you can browse this image.
The simplest method to enable CORS is to add Access-Control-Allow-Origin:* to the response header from WEB servers, which allows CORS from any source. If you want to limit the source, you should specify the domain in the configuration such as Access-Control-Allow-Origin:https://hogehoge.com .
Solving the CORS Issues in Laravel 6/7 In Laravel. this can be solved using the barryvdh/laravel-cors package which can be installed using Composer.
Your API resource has a CORS policy which restricts what domains may access the resource. The error you're getting is telling you that the resource does not have a CORS header allowing access from the calling domain. You need to set the CORS policy to whitelist your domain: http://localhost:3000 .
Here are some gotchas when using fruitcake/laravel-cors
:
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.
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
app/config/cors.php
:$ php artisan config:cache
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: *');
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With