javascript - habilitar - Solicitud CORS no funciona en Safari

jquery cors

Question

Estoy haciendo una solicitud CORS xhr. Esto funciona bien en Chrome, sin embargo cuando corro en Safari obtengo un ''No se puede cargar ---- acceso no permitido por Access-control-allow-origin''. El código es exactamente el mismo y he configurado CORS en el servidor. A continuación está mi código. (Tiene control de acceso, pero puedes probar sin el accessToken)

 var water;
 var req = new XMLHttpRequest;
 req.overrideMimeType("application/json");
 req.open(''GET'', ''https://storage.googleapis.com/fflog/135172watersupplies_json'', true);
 req.setRequestHeader(''Authorization'', ''Bearer '' + accessToken);
 origThis = this;
 var target = this;
 req.onload = function() {
 water = req;

 req.send(null);

Después de mirar los encabezados de solicitud, veo que primero se realiza una solicitud de OPCIONES y esta es la solicitud que no está permitida. El encabezado de origen no está incluido en la respuesta en Safari, pero está en chrome. ¿Qué podría causar esto? Cualquier ayuda sería muy apreciada.

ACTUALIZACIÓN: Lo he probado en Safari para Windows y funciona, así que no estoy seguro de lo que está sucediendo aquí. El mac que estoy usando es un acceso remoto (Macincloud.com), pero no creo que tenga nada que ver con eso.

Answer 1

Acabo de tener un problema similar, error CORS. Funcionaría en Firefox y Chrome, pero no en Safari 10.

Resultó que necesitábamos poner la barra final en la URL JSON.

Answer 2

Cuando consulto su URL, recibo los siguientes encabezados de Access-Control :

Access-Control-Allow-Origin: *
Access-Control-Expose-Headers: Authorization, Cache-Control, Content-Length, Date, Expires, Server, Transfer-Encoding, x-goog-meta-foo1

Sospecho que tiene algo que ver con los encabezados de Access-Control, ya sea que esté dejando algo o sea demasiado específico.

Dado que en realidad está enviando un encabezado personalizado, es posible que desee intentar:

Access-Control-Allow-Headers: *

También podría ver si omitir Access-Control-Expose-Headers hace la diferencia.

Más allá de eso, en realidad sería útil ver los encabezados de solicitud / respuesta reales.

Answer 3

Cuando intento

curl -v -X OPTIONS /
  -H ''Origin: fflog.storage.googleapis.com'' /
  -H ''Access-Control-Request-Method: GET''  /
  https://storage.googleapis.com/fflog/135172watersupplies_json

Obtengo, entre otros encabezados:

Access-Control-Allow-Origin: *

Cuando ejecuto solicitudes AJAX contra https://storage.googleapis.com/fflog/135172watersupplies_json desde Safari 6.0.4 en Mac OS 10.8.3 obtengo 403 errores, pero todos se ejecutan.

Así que solo puedo adivinar que está intentando enviar una solicitud con credencial para la cual no se permite un comodín Access-Control-Allow-Origin .

Answer 4

En cuanto a Amazon S3, solo funcionó en safari después de que agregué más encabezados permitidos, Content-Type y Range. Uno de estos hizo el trabajo.

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <AllowedMethod>POST</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>Origin</AllowedHeader>
        <AllowedHeader>X-Requested-With</AllowedHeader>
        <AllowedHeader>Content-Type</AllowedHeader>
        <AllowedHeader>Range</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Answer 5

Gracias por todas las respuestas, finalmente obtuve esto. Añadí ''Origin'' a mis responseHeaders y funciona bien ahora.

Answer 6

Me encontré con el mismo error al hacer una solicitud XHR contra un archivo en Amazon S3. En Safari 7 estaba fallando. Sé que no estás usando Amazon S3, pero pensé que publicaría en caso de que esta solución ayudara a otros.

El problema fue que Safari 7 configuró el encabezado Access-Control-Request-Headers en "origen, x-requested-with", pero mi configuración AWS CORS solo permitía "x-requested-with":

<?xml version="1.0" encoding="UTF-8"?>
<CORSConfiguration xmlns="http://s3.amazonaws.com/doc/2006-03-01/">
    <CORSRule>
        <AllowedOrigin>*</AllowedOrigin>
        <AllowedMethod>GET</AllowedMethod>
        <MaxAgeSeconds>3000</MaxAgeSeconds>
        <AllowedHeader>Authorization</AllowedHeader>
        <AllowedHeader>x-requested-with</AllowedHeader>
    </CORSRule>
</CORSConfiguration>

Agregué "origen" como un encabezado permitido y todo funcionó bien.

        <AllowedHeader>origin</AllowedHeader>

Nota : el AllowOrigin de * es solo para fines de desarrollo. Consulte el comentario de @andes a continuación para obtener más información.

Answer 7

Para la solicitud CORS debe usar su origen fflog.storage.googleapis.com . Si usa el origen común de storage.googleapis.com , cualquier sitio puede acceder a su depósito.

intente probar eliminar overrideMimeType ? Si configura el tipo de mimo, regresará correctamente.

También tengo un problema con la solicitud POST de Safari, pero todavía no hay respuesta. GET está bien.

Answer 8

Tuve el mismo problema que CORS funcionó en Chrome, pero arrojé un error de origen en Safari. Resultó que era un problema de autorización de Kerberos. Cuando cargué el XHR URL directamente en Safari, me pidieron las credenciales. Después de ingresarlos, volví al sitio original y Safari ya no tenía el error CORS.

Answer 9

intente eliminar el tipo de mimet overide.

 var
 jsonhandler=function(){var req=JSON.parse(this.response);console.log(req)},
 req=new XMLHttpRequest;
 req.open(''GET'',''https://storage.googleapis.com/fflog/135172watersupplies_json'');
 req.setRequestHeader(''Authorization'',''Bearer ''+accessToken);
 req.onload=jsonhandler;
 req.send();