Así que estoy usando una API de terceros en mi aplicación de front-end. Estaba teniendo algunos problemas de CORS. Dado que es una API pública, contacté a los mantenedores de la API para pedirles que levantaran el control CORS. Lo han hecho, aparentemente poniendo un * en Access-Control-Allow-Origin .
Sería perfecto pero... dado que esta API (antigua) requiere autenticación, está usando cookies y ahora aparece este error (ver título).
Mi aplicación está en React, estoy usando Axios con un
myApiRequest.defaults.withCredentials = true;línea.
¿Hay alguna forma de hacerlo en una aplicación front-end o es back-end la única forma de hacerlo?
Gracias !
Dos problemas requieren dos soluciones diferentes
Aquí es donde terminas usando CROS y ACAO. En un sentido general, controla qué dominio tiene acceso a este sitio web, ya sea cargando un script o desgarrando una imagen.
Puede controlar cómo se comparten sus cookies con dominios de terceros o cualquier código JS mediante la política de cookies. Compruebe acerca de estricta, laxa.
Pero no comparta los sitios web que no son de confianza para acceder a sus cookies. A medida que solicitan recursos en nombre de un usuario.
Intente hacer solicitudes de servidor a servidor y use su servidor como intermediario para obtener todos los datos.
¿Ha examinado los otros encabezados que se utilizan para controlar las solicitudes de origen cruzado?
No especificó la API de terceros a la que está realizando las solicitudes, pero ¿puede ser que Access-Control-Allow-Origin no sea suficiente?
Creo que el servidor API de terceros también debe especificar los siguientes dos encabezados:
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Credentials
https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Access-Control-Allow-Methods
Puede estar relacionado: https://stackoverflow.com/a/24689738/5747327 y https://stackoverflow.com/a/19744754/5747327
De acuerdo con este MDN :
Para corregir este problema en el lado del cliente, asegúrese de que el valor del indicador de credenciales sea falso cuando emita su solicitud de CORS.
Establezca su credencial como falsa:
myApiRequest.defaults.withCredentials = false;Nota: Las respuestas XMLHttpRequest de un dominio diferente no pueden establecer valores de cookies para su propio dominio a menos que withCredentials se establezca en verdadero antes de realizar la solicitud, independientemente de los valores del encabezado Access-Control-.
Use las solicitudes XMLHttpRequest por separado en el back-end de esta manera:
var oReq = new XMLHttpRequest(); oReq.addEventListener("progress", updateProgress); oReq.addEventListener("load", transferComplete); oReq.addEventListener("error", transferFailed); oReq.addEventListener("abort", transferCanceled); oReq.open();La respuesta a tu pregunta:
Mi pregunta es: ¿hay alguna otra manera de hacer esto sin utilizar este método no admitido?
es: como, está utilizando las solicitudes enviadas desde el lado del servidor, por lo que debe usarlas solo desde los métodos compatibles, no de otras maneras.
Enlaces de lectura: