amazon-s3 - files - javascript aws sdk credentials

CORS, Amazon S3 y Rails: falla en IE 10 y Safari

Question

IE 10 es compatible con CORS. Amazon S3 es compatible con CORS.

Tenemos carga directa desde el sitio a S3 que funciona en todos los navegadores pero IE 10 (sin molestar con IE 9-). Funciona así:

1. El usuario elige un archivo (arrastrar y soltar o seleccionar desde la entrada del archivo)

2. (POST) Tenemos que "firmar" la solicitud antes de que pase a S3 ( $.post(''/static/sign_asset'', { ... } ) que tiene una devolución de llamada que se activa perfectamente durante todo el día.

3. (POST) Luego hacemos que el XHR sea S3 con los datos del archivo y los datos de la firma y tal.

var xhr = new XMLHttpRequest(); // etc var fd = new FormData(); // etc xhr.open(''POST'', url, true); xhr.send(fd);

El archivo se carga, todo funciona perfectamente en todos los navegadores excepto ...

Los problemas comienzan en IE 10:

4. Origen nulo no encontrado en el encabezado Access-Control-Allow-Origin. y XMLHttpRequest: error de red 0x80070005, acceso denegado. Ningún otro navegador muestra esto después de haber configurado response.headers["Access-Control-Allow-Origin"] = "*" en el controlador que envía la respuesta. Incluso cuando teníamos este error, Chrome mostraría este error, pero la solicitud seguiría ejecutándose.

5. El archivo realmente se carga a S3, a pesar de este error. Amazon S3 hace su redirección 303 , que es nuestra verificación de que el archivo se cargó correctamente.

6. (GET) Esto es una redirección en una solicitud CORS Ajax, por lo que el "redireccionamiento" no actualiza la página que acaba de regresar y llega a nuestros servidores. IE 10 realiza esta solicitud con un Content-Type de multipart/form-data; boundary=---------------------------7dd2ce2201da multipart/form-data; boundary=---------------------------7dd2ce2201da

Esto es lo que hace que Rails se bloquee.

Started GET "/static/signed/asset/tsabat/83ee6840-7158-0130-c19b-28cfe912f6ff?bucket=s.cdpn.io&key=5%2Fauthor-tim_2.jpg&etag=%2260fb3876d516553ff6f3a018066b3250%22" for 127.0.0.1 at
 2013-03-17 10:46:36 -0700

EOFError - bad content body:
  (gem) rack-1.4.5/lib/rack/multipart/parser.rb:74:in `block in Rack::Multipart::Parser#fast_forward_to_first_boundary''  (gem) rack-1.4.5/lib/rack/multipart/parser.rb:72:in `Rack::Multipart::Parser#fast_forward_to_first_boundary''
  (gem) rack-1.4.5/lib/rack/multipart/parser.rb:72:in `Rack::Multipart::Parser#parse''
  (gem) rack-1.4.5/lib/rack/multipart/parser.rb:15:in `Rack::Multipart.parse_multipart''
  (gem) rack-1.4.5/lib/rack/multipart.rb:25:in `ActionDispatch::Request#parse_multipart''
  (gem) rack-1.4.5/lib/rack/request.rb:336:in `ActionDispatch::Request#POST''
  (gem) rack-1.4.5/lib/rack/request.rb:201:in `ActionDispatch::Request#POST''

Safari también falla (6.0.2)

Safari devuelve un código de estado de 200 y Rails no se asusta con la redirección, pero xhr.status está equivocado. xhr.readyState == 4, pero xhr.status == 0. Estábamos buscando 200 para asegurarnos de que funcionó bien. Eso es bastante fácil de arreglar, pero aún así ...

Chrome funciona bien : parece que ni siquiera establece Content-Type

Firefox funciona bien - Content-Type application/json; charset=utf-8 application/json; charset=utf-8

Hay páginas de ejemplo que muestran qué tan bien maneja IE 10 CORS, pero no se ocupan de este problema de redirección.

Answer 1

Miembro del equipo CodePen aquí. Nos dimos cuenta de esto ...

Queríamos depender de la redirección 303 integrada en la funcionalidad POST de S3, pero resultó ser problemática, como se muestra arriba. En cambio, simplemente dejamos de usar el campo de formulario S3 success_action_redirect y cambiamos a success_action_status .

Para la posteridad, no dependa de la redirección 303 del S3 para trabajar de manera consistente en todos los navegadores para solicitudes xhr. Si lo haces, pasarás el tiempo luchando contra encabezados inválidos, orígenes nulos y dragones.