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.
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 anteshttp://localhost
ohttp://192.168.1.123
y nada. Saludos.