Cómo solucionar un problema de JavaScript CORS con API pública

CORS significa Cross-Origin Resource Sharing y es una característica de seguridad implementada en el backend y respaldada por los navegadores.

Piense en la respuesta del servidor como una fiesta en un club nocturno y las solicitudes son invitados que intentan entrar. La mayoría de los invitados bien vestidos ni siquiera son interrogados, el gorila simplemente asume que no harán ningún daño y los deja entrar. Así es como se manejó su solicitud PHP. Pero el navegador solicita que las personas sean un grupo desagradable. Algunos de ellos pueden comportarse y, por lo tanto, están en la lista permitida, pero la mayoría de ellos no, por lo que el gorila no los deja pasar.

Ahora una explicación más seria. El servidor está configurado para permitir ciertos orígenes, es decir, la página donde se envió la solicitud y no permite el resto. Esto se devuelve al navegador como encabezado Access-Control-Allow-Origin y se espera que el navegador maneje este encabezado en consecuencia, permitiendo o rechazando la solicitud. Este comportamiento del navegador no se puede modificar dentro del propio código JavaScript, la única opción es cambiarlo dentro de la configuración y no estoy seguro de si todos los navegadores lo permiten. Si opta por la segunda opción, sepa que todos los usuarios de su página tendrán que hacer lo mismo o la página no funcionará correctamente.

Al realizar solicitudes de origen cruzado, verá 2 solicitudes, excepto con una solicitud GET, donde depende de la implementación de la biblioteca. La primera solicitud es de tipo OPTIONS y se denomina solicitud de verificación previa, que es el navegador que le pregunta al servidor si esta solicitud es posible en lo que respecta al control de acceso y la segunda solicitud es la solicitud real que desea enviar. Técnicamente, solo una solicitud podría funcionar, pero si se rechaza el origen, habrá una pérdida innecesaria de transferencia de datos y será más lento. La solicitud OPTIONS es muy ligera ya que no se reciben datos reales, solo los encabezados. Tenga en cuenta que esto solo se aplica a las solicitudes enviadas desde un navegador.

Dado que su solicitud PHP no se envió a través de un navegador, este encabezado no se utiliza y la solicitud se realiza correctamente. También habrá una sola solicitud, ya que la solicitud de verificación previa nunca se envía.

Pero cuando se realiza una solicitud desde el navegador, la página desde la que se envía la solicitud no se incluye en Access-Control-Allow-Origin, por lo tanto Access-Control-Allow-Origin, su navegador bloqueará la solicitud.

Para solucionar esto, hay 3 opciones que se me ocurren:

  • Si puede modificar la configuración del servidor, agregue la página desde la que envía las solicitudes al encabezado Access-Control-Allow-Origin .
  • Cree su propio punto final de API que realizará una solicitud a la API de destino y devolverá los valores de respuesta.
  • Configure un servidor HTTP como apache o nginx para enviar su solicitud a la API de destino. Tenga cuidado con lo que hace, si lo hace demasiado genérico y alguien lo descubre, puede usarlo y abusar de él.

El usuario de Quora hizo un buen trabajo al explicar las ideas detrás de CORS en la respuesta a ¿Es CORS lo opuesto a lo que desea?

Tengo una implementación CORS en mi backend. Así es como hago mis solicitudes:

$ .ajax ({
tipo: ‘OBTENER’,
url: window.url + “/ v0.1 / persona / show”,
crossDomain: verdadero,
caché: falso
xhrFields: {
withCredentials: falso
},
beforeSend: function (solicitud) {
request.setRequestHeader (‘Autorización’, ‘Portador’ + window.token.access_token);
},
encabezados: {
‘Content-Type’: ‘application / json’
},
dataType: “text json”,
éxito: función (json) {

}
}