1

Estoy desarrollando una api con php para una sistema web, utilizo la libreria Flight para desarrollarla. He configurado en la api los headers:

  header('Access-Control-Allow-Origin: *');
  header("Allow: GET, POST, PUT, DELETE, UPDATE, OPTIONS");
  header("Access-Control-Allow-Methods: GET, POST, PUT, DELETE, UPDATE, OPTIONS");
  header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method, Access-Control-Request-Headers, Authorization");
  header("HTTP/1.1 200 OK");

Sin embargo al momento de hacer una peticion fetch() a la url de la api me arroja un error de CORS el cual dice lo siguiente:

Access to fetch at 'https://localhost/api/api/v1/1254652f4/dashboard/' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.

Dicho sea de paso realizo la misma peticion con Postman y no da ningun error. Tengo de igual manera un archivo .htaccess en el cual estan las siguientes lineas:

RewriteEngine On
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php [QSA,L]

La peticion fetch la realizo de la siguiente manera:

 var myHeaders = new Headers();
 myHeaders.append("Authorization", "Bearer");
 myHeaders.append("x-api-key", "$2y$15$eXAElFJHbJYZ1Hj.uY7IWubUyulOSo68tXEicCv/MV7Nax816RmGC");
 myHeaders.append("Access-Control-Allow-Origin", "*");

 var requestOptions = {
   method: 'GET',
   headers: myHeaders,
   redirect: 'follow'
 };

 fetch("http://localhost/api/api/v1/1254652f4/dashboard/", requestOptions)
  .then(response => response.json())
  .then(result => console.log(result))
  .catch(error => console.log('error', error));

E intentado de igual manera agregar los headers en este archivo más sin embargo el resultado es el mismo, espero y puedan apoyarme a encontrar o a saber la solución. Muchas gracias de antemano.

8
  • Postman no sirve como comprobacion de CORS, los navegadores chequean CORS, postman no.
    – gbianchi
    Commented el 9 ene. a las 21:31
  • Si eso lo entiendo, lo que necesito saber es como puedo solucionar este error: Access to fetch at 'https://localhost/api/api/v1/1254652f4/dashboard/' from origin 'http://localhost' has been blocked by CORS policy: Response to preflight request doesn't pass access control check: It does not have HTTP ok status.
    – alfalexDev
    Commented el 9 ene. a las 21:50
  • 1
    Cuando haces la petición desde que url la haces??
    – Yussef
    Commented el 9 ene. a las 22:03
  • Eh editado la pregunta, para responderle @Yussef
    – alfalexDev
    Commented el 9 ene. a las 22:15
  • No me entendiste, esa aplicación que realiza el fetch ¿que url tiene?
    – Yussef
    Commented el 9 ene. a las 22:17

2 respuestas 2

1

El problema es en el preflight:

Una petición preflight: se efectua antes de enviar la petición (POST,GET,PUT, etc) para comprobar las opciones disponibles.

puedes documentarte aqui

Aqui tienes como lo he solucionado

if ($_SERVER['REQUEST_METHOD'] === 'OPTIONS') {
    header('Access-Control-Allow-Origin: *');
    header('Access-Control-Allow-Methods: POST, GET, DELETE, PUT, PATCH, OPTIONS');
    header('Access-Control-Allow-Headers: token, Content-Type');
    header('Access-Control-Max-Age: 1728000');
    header('Content-Length: 0');
    header('Content-Type: text/plain');
    die();
}

header('Access-Control-Allow-Origin: *');
header('Content-Type: application/json');

como nota: es importante el die(); dentro del if para que el preflight finalice.

1
  • 1
    En efecto el problema era el mensionado eh aplicado los headers requeridos en mi api y ha fucionado correctamente ¡muchas gracias por el apoyo @W Aleman!!!
    – alfalexDev
    Commented el 11 ene. a las 20:05
-2

Basicamente ese problema de CORS es por que en tu API no tienen configurado tu dominio donde está el front como permitido, intenta modificar tu API para agregar el dominio de localhost a la lista o en su defecto, si estás probando solamente, podrías permitir todos los dominios solo mientras haces pruebas.

Por cierto, Postman se salta éstas validaciones, es por eso que en ahí funciona correctamente!

1

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.