0

he estado construyendo API Rest con Laravel 9, la cual "funciona" hasta cierto punto, es decir, puedo hacer las peticiones a mis enpoints tanto de testing como Pre-productivos tanto POST y GET sin problema alguno desde cualquier API tester como Postman, RapidAPI, SOAPUI, incluso desde algunos sitios web como reqbin.com y las response son correctas.

Problema/Error

Sin embargo el error esta cuando utilizo una funcion fetch, POST hacia mi url pre-productiva, aquí es donde el Access-Control-Allow-Origin bloquea la petición y falla.

Pero si uso la misma URL pre productiva con una cURL de php funciona sin problemas (ver ejemplo).

Incluso e copiado la(s) funcion de Postman y falla; Cabe destacar que he intentado desde mi localhost y desde mi web server y falla.

He intentado varias cosas:

  • Diversas configuraciones de los cors de laravel.
  • he agregado el middleware cors (cabe destacar que para laravel 9 ya es un middleware propio, ya no se tiene que crear), pero probé las dos formas.
  • Con fuitCake de laravel (que también para esta version tiene un manejo diferente, incluso ya no esta dentro del composer ni del kernel)
  • varias configuraciones en la funcion fetch más en la parte de los headers
  • Copia de diversos ejemplos fetch de los API tester

Ejemplos Fetch

/* mi funcion fetch, aqui he probado con varias configuraciones, líneas comentadas...*/

headers = new Headers();
headers.append('Content-Type', 'application/json');
//headers.append('Accept', '*/*');
headers.append('Accept', 'application/json');
//headers.append('Authorization', 'Basic ');
//headers.append('Origin','http://192.168.1.123');

const options = {
    method: 'POST',
    body: JSON.stringify({'clavePlantel' : '2'}),
    //body: '{"clavePlantel":"2"}',
    mode: 'cors',
    //credentials: 'include',
    headers: headers
};

fetch(`${urlPreProductiva}`, options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));

Ejemplo postman, funciona con postman directamente pero si genero el codigo y lo paso a mi local host o un JS en mi webserver falla.

var myHeaders = new Headers();
myHeaders.append("Content-Type", "application/json");

var raw = JSON.stringify({
"clavePlantel": "2"
});

var requestOptions = {
method: 'POST',
headers: myHeaders,
body: raw,
redirect: 'follow'
};

fetch(`${urlPreProductiva}`, requestOptions)
.then(response => response.text())
.then(result => console.log(result))
.catch(error => console.log('error', error));

/*otra funcion **RapidAPI** */
const options = {method: 'POST', body: '{"clavePlantel":"2"}'};

fetch(`${urlPreProductiva}`, options)
.then(response => response.json())
.then(response => console.log(response))
.catch(err => console.error(err));

Y como les decia con PHP cURL esto no sucede, procesa las peticiones sin problemas...

$url = "urlPreProductiva";


$curl = curl_init($url);
curl_setopt($curl, CURLOPT_URL, $url);
curl_setopt($curl, CURLOPT_POST, true);
curl_setopt($curl, CURLOPT_RETURNTRANSFER, true);

$headers = array(
"Content-Type: application/json",
);
curl_setopt($curl, CURLOPT_HTTPHEADER, $headers);

$data = '{"clavePlantel":2}';

curl_setopt($curl, CURLOPT_POSTFIELDS, $data);

//for debug only!
curl_setopt($curl, CURLOPT_SSL_VERIFYHOST, false);
curl_setopt($curl, CURLOPT_SSL_VERIFYPEER, false);

$resp = curl_exec($curl);
curl_close($curl);
//var_dump($resp);
//print_r( $curl );
echo $resp;

Configuraciones de laravel igual e intentado varias opciones:

CORS.

'paths' => ['api/*', 'sanctum/csrf-cookie'],
//'paths' => ['api/*'],
//'paths' => ['api/*', 'public/*'],

'allowed_methods' => ['PUT', 'GET', 'HEAD', 'POST', 'DELETE', 'OPTIONS'],

//'allowed_origins' => ['*'],
'allowed_origins' => ['my url'],

'allowed_origins_patterns' => [],

'allowed_headers' => ['*'],

'exposed_headers' => [],

'max_age' => 0,

//'supports_credentials' => false,
'supports_credentials' => true,

Middleware CORS.

public function handle($request, Closure $next)
{
    $origin = $request->getHttpHost() == 'localhost' ?
                'http://localhost' : 'http://miURL';

    return $next($request)
        ->header('Access-Control-Allow-Origin', $origin)
        ->header('Access-Control-Allow-Methods', 'GET, POST, PUT, DELETE')
        ->header('Access-Control-Allow-Headers', 'Content-Type');
}

Incluso usando el metodo response() de laravel

return response()
            ->json($resultadoAPI)
            ->header('Access-Control-Allow-Origin', '*');

Ya en este punto no sé si es por el uso de fetch, cors, headers; y/o por qué con cURL funciona y con fetch no.

Espero puedan ayudarme.

2
  • No se exactamente cual pueda ser el error, pero en tu handler, donde asignas los headers, recuerda permitir tambien OPTIONS (para no bloquear los pre-flight requests). Es practicamente seguro que el error esta del lado del servidor. Procura no usar Access-Control-Allow-Origin: * porque no funciona para todas las peticiones, es mejor usar el origen desde el que realizan la petición. Tambien revisa si depronto tienes algun otro middleware que pueda estar retornando algo antes
    – Pipe
    Commented el 7 oct. 2022 a las 23:25
  • @Pipe créeme que ando igual (me refiero al error), en el handler si he configurado esa parte, incluso le he puesto las rutas en especifico, http://localhost o http://192.168.1.123 y nada. Saludos.
    – Artes
    Commented el 8 oct. 2022 a las 14:14

0

Tu Respuesta

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

Examina otras preguntas con la etiqueta o formula tu propia pregunta.