yo tambien pase por ese problema, te cuento como lo solucione.
En realidad use dos estrategias, la primera :
Cree un middleware
para los headers
Recuerda que un middleware
nos permite gestionar las peticiones HTTP
php artisan make:middleware Cors
En el middleware
<?php
namespace App\Http\Middleware;
use Closure;
class Cors
{
public function handle($request, Closure $next)
{
//Basicamente con esto configura que origenes, y que peticiones son aceptadas
return $next($request)
//Url a la que se le dará acceso en las peticiones, puedes poner un "*" para aceptar todas los origenes
->header("Access-Control-Allow-Origin", "http://urlfronted.example")
//Métodos que a los que se da acceso, agregas los que necesites
->header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE")
//Headers de la petición
->header("Access-Control-Allow-Headers", "X-Requested-With, Content-Type, X-Token-Auth, Authorization");
}
}
Debes incluirlo en el archivo Kernel.php
protected $routeMiddleware = [
//Aca hay muchos mas middlewares
"cors" => \App\Http\Middleware\Cors::class,
];
Y dentro de tus rutas de api, api.php
Debes declarar todos tus endpoints dentro de la siguiente forma:
Route::group(['middleware' => ['cors']], function () {
//Aca declaras tus rutas
Route::get('Ejemplo', [EjemploController::class, 'functionExample']);
}]);
Tambien modifique el archivo de congiguraciones de cors que esta en la carpeta congig, llamado cors.php
Quedo de la siguiente forma:
<?php
return [
/*
|--------------------------------------------------------------------------
| Cross-Origin Resource Sharing (CORS) Configuration
|--------------------------------------------------------------------------
|
| Here you may configure your settings for cross-origin resource sharing
| or "CORS". This determines what cross-origin operations may execute
| in web browsers. You are free to adjust these settings as needed.
|
| To learn more: https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS
|
*/
'paths' => [
'api/*',
'admin/api/*',
'sanctum/csrf-cookie'
],
'allowed_methods' => [ //'GET, POST, PUT, PATCH, DELETE, OPTIONS'
'GET',
'POST',
'PUT',
'PATCH',
'OPTIONS'
],
'allowed_origins' => ['*'],
'allowed_origins_patterns' => [],
'allowed_headers' => [// 'Content-Type, Authorization, Accept'
'Content-Type',
'Authorization',
'Accept'
],
'exposed_headers' => [],
'max_age' => 0,
'supports_credentials' => true,
];
sin embargo, tambien instale una extension de google chrome para configurar los origenes cruzados (cors)
Te la dejo en el siguiente enlace : Herramienta para configurar cors
Pero eso no es todo, como estoy usando React, uso Axios
para hacer las peticiones, me aseguro de que todas mis peticiones contengan los parametros en el header para evitar errores de origen cruzado (cors) de la siguente forma:
return await axios({
url:url,
method:method,
data:data,
headers: {
'Access-Control-Allow-Methods': 'GET, POST, PUT, PATCH, DELETE',
"Authorization": "Bearer " + token,
"Access-Control-Allow-Origin":"*",
"access-control-allow-headers":"X-Requested-With, Content-Type, X-Token-Auth, Authorization"
}
})
.then(function(res) {
return res
})
.catch(err => {return "el error es" +err})
aca te dejo otra extension de crhome para gestionar y testear cors
Bueno esta fue la forma que me sirvio a mi para solucionar los problemas de origenes cruzados, la verdad que fue algo realmente tedioso porque tambien probe de muchas formas y ninguna me funcionaba, espero a ti te funcione tambien.
Por ultimo en caso de que no te funcione Aca hay un repositorio con recursos para gestionar el cors (este no alcance a probarlo porque lo de arriba me funciono)
Y lo mas importante la Documentacion de control de acceso de origenes cruzados