2011-12-14 15 views
13

Si hacemos window.location = "http://MyApi.com/Pdf";, el navegador hace un GET de la URL http://MyApi.com/Pdf. Pero si queremos establecer el encabezado authentication de la solicitud antes de hacer GET de la URL porque el servidor es un servidor REST y no admite cookies. ¿Como hacer esto?JavaScript - Cómo configurar el encabezado de solicitud para un navegador GET

En todos los casos, estoy usando $.ajax para llamar al servicio pero esta vez necesito mostrar la respuesta en una nueva ventana. La respuesta es un contenido de archivo PDF.

Gracias de antemano.

Respuesta

8

En los navegadores más recientes, es posible que pueda usar gotas:

<!DOCTYPE html> 
<html> 
<head> 
</head> 
<body> 
<button onclick="tryit();">PDF</button> 
<script> 
    function tryit() { 
     var win = window.open('_blank'); 
     downloadFile('/pdf', function(blob) { 
      var url = URL.createObjectURL(blob); 
      win.location = url; 
     }); 
    } 
    function downloadFile(url, success) { 
     var xhr = new XMLHttpRequest(); 
     xhr.open('GET', url, true); 
     xhr.setRequestHeader("Authorization", "Basic " + btoa("username:password")); 
     xhr.responseType = "blob"; 
     xhr.onreadystatechange = function() { 
      if (xhr.readyState == 4) { 
       if (success) success(xhr.response); 
      } 
     }; 
     xhr.send(null); 
    } 

</script> 
</body> 
</html> 

En IE, pida al usuario:

window.navigator.msSaveOrOpenBlob(blob, 'readme.pdf'); 

P. S. Puede probar el backend en el Nodo:

router.get('/pdf', function(req, res) { 
    if(req.headers.authorization !== 'Basic dXNlcm5hbWU6cGFzc3dvcmQ=') return res.status(403).send('Not allowed'); 
    res.sendFile(path.join(__dirname, 'public', 'render.pdf')); 
}); 
router.get('/', function(req, res) { 
    res.render('index'); 
}); 
+0

Parece que va a funcionar. ¿lo intentó? – IsmailS

+1

Sí, con Chrome 48 -> Nodo 0.12 ¿Marcarlo? :) – malix

+0

compatible con los últimos navegadores. Pero aún en borrador. https: //developer.mozilla.org/en/docs/Web/API/URL/createObjectURL # Browser_compatibility – IsmailS

-2

Debe configurar $.ajax usando beforeSend. Debajo hay un ejemplo, pero por supuesto no sé si la configuración exacta funcionará para usted sin ningún código que ver.

$.ajax({ 
    url : '/model/user.json', 
    dataType : 'json', 
    'beforeSend' : function(xhr) { 
      var bytes = Crypto.charenc.Binary.stringToBytes(username + ":" + password); 
      var base64 = Crypto.util.bytesToBase64(bytes); 
      xhr.setRequestHeader("Authorization", "Basic " + base64); 
    }, 
    error : function(xhr, ajaxOptions, thrownError) { 
     reset(); 
     onError('Invalid username or password. Please try again.'); 
     $('#loginform #user_login').focus(); 
    }, 
    success : function(model) { 
     cookies(); 
      ... 
    } 
}); 

Para que esto funcione necesita crypto-js.

+0

no acaba de responder a la pregunta en mi opinión, la respuesta es un documento PDF a ser prestados por el navegador. –

+0

Déjenme aclarar nuevamente. No necesito configurar el encabezado para la solicitud ajax. Quiero configurar el encabezado para la solicitud GET completa de la página. Ya estoy usando 'beforeSend' para establecer el encabezado para todas las solicitudes de AJAX. – IsmailS

1

Si no se preocupan por ocultar o ofuscar las credenciales de usuario a continuación, sólo tiene que utilizar llanura autentificación GET: uso http://username:[email protected]/ en lugar de http://MyApi.com/

+0

Gracias v mucho por responder. Tengo un mecanismo de autenticación personalizado. :(. Entonces el valor del encabezado 'authorization' se parece a' CompanyNameToken '. No me importaría incluir el token en la URL si hay alguna peculiaridad como esta. – IsmailS

1

¿Tiene que ser un GET?

La razón por la que estoy preguntando es que solo podría tener un formulario POST (para un destino = "_ BLANCO") que publique cualquier cosa pero que muestre un archivo incrustado en una nueva ventana. Por supuesto, esto no resolvería el problema con tus encabezados personalizados, pero como también puedes POST usar jquery.ajax, lo que te permite establecer tus propios encabezados, obtendrás lo mejor de ambos mundos.

Aquí hay un jQuery plugin que crea dicha forma dinámicamente para descargar cualquier archivo. Usted podría utilizar esto como una referencia ...

Esperanza esto ayuda

Cuestiones relacionadas