1

tengo un problema con una petición a una API, estoy usando en backend Laravel y para Frontend Quasar, el error me indica lo siguiente: introducir la descripción de la imagen aquí

Ya he intentado de todo lo que hay en internet, videos, configure de la siguiente manera mi Cors.php:

public function handle(Request $request, Closure $next)
{
    return $next($request)

    ->header('Access-Control-Allow-Origin', '*')
    ->header("Access-Control-Allow-Methods", "GET, POST, PUT, DELETE, PATCH, OPTIONS")
    ->header("Access-Control-Allow-Headers", "Content-Type, Authorization");
}

}

Para las rutas en api.php, lo mande a llamar de la siguiente manera: Route::group(['middleware' => ['cors']], function () { });

1 respuesta 1

1

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

2
  • Hola amigo, me funciono perfectamente, muchas gracias, otra cosa cuando compilo el proyecto, me aparece lo siguiente: WebSocket connection to 'ws://127.0.0.1:5500//ws' failed: eso en el navegador, estuve buscando el archivo pero no está en mi proyecto. Commented el 2 sept. 2022 a las 16:20
  • un gusto poder ayudar, para eso tienes que formular otra pregunta para agregar mayores antecedentes
    – David081
    Commented el 2 sept. 2022 a las 17:01

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.