Question

如果我们window.location = "http://MyApi.com/Pdf";，浏览器会对网址http://MyApi.com/Pdf进行GET。但是，如果我们想在执行URL的GET之前设置请求的authentication标头，因为服务器是REST服务器并且它不支持cookie。这该怎么做？

在所有情况下，我都使用$.ajax来调用服务，但这次我需要在新窗口中显示响应。响应是PDF文件内容。

提前致谢。

Answer 1

在更新的浏览器中，您可以使用blob：

slice

在IE中，询问用户：

<!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>

P.S。您可以在Node中测试后端：

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

Answer 2

我认为这就是你要找的......或者如果我错了，请纠正我。

https://developer.mozilla.org/en/docs/Setting_HTTP_request_headers

Answer 3

如果您不关心隐藏或混淆用户凭据，那么只需使用纯GET身份验证：使用http://username:password@MyApi.com/代替http://MyApi.com/

Answer 4

是否必须是GET？

我问的原因是你可以只有一个POST表单（到目标=“_ BLANK”）发布任何内容但在新窗口中显示嵌入文件。当然这不会解决你的自定义标题的问题，但是因为你也可以使用jquery.ajax进行POST - 它允许你设置自己的标题 - 你将拥有两全其美的优势。

这是一个jQuery plugin动态创建这样一个表单，以便下载任何文件。您可以将其用作参考......

希望这有帮助

Answer 5

您应该使用$.ajax配置beforeSend。下面是一个例子，但我当然不知道确切的设置是否适用于你而没有任何代码可供查看。

$.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();
            ...
    }
});

为此，您需要crypto-js。

JavaScript - 如何为浏览器GET设置请求标头

5 个答案: