web-dev-qa-db-ja.com

JavaScript-ブラウザのリクエストヘッダーを設定する方法GET

window.location = "http://MyApi.com/Pdf";を実行すると、ブラウザはURL http://MyApi.com/PdfのGETを実行します。ただし、サーバーがRESTサーバーであり、Cookieをサポートしていないため、URLのGETを実行する前にリクエストのauthenticationヘッダーを設定する場合。これを行う方法？

いずれの場合も、$.ajaxを使用してサービスを呼び出していますが、今回は新しいウィンドウに応答を表示する必要があります。応答はPDFファイルの内容です。

前もって感謝します。

javascriptrestbrowserhttp-headershttprequest
14
IsmailS

最近のブラウザでは、blobを使用できる場合があります。

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

IEでは、ユーザーに次のことを尋ねます。

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

P.S. Nodeでバックエンドをテストできます。

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');
});
9
malix

これがあなたが探しているものだと思います...または私が間違っている場合は私を訂正してください。

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

2
Saurabh Kumar

GETである必要がありますか？

私が尋ねている理由は、新しいウィンドウに埋め込みファイルを表示する以外は何でも投稿するPOSTフォーム（target = "_ BLANK"へ））を作成できるからです。もちろん、これはできません。カスタムヘッダーの問題を解決しますが、jquery.ajaxを使用してPOSTを使用することもできるので、独自のヘッダーを設定できます）、両方の長所があります。

これが jQueryプラグイン で、どのファイルをダウンロードするためにもそのようなフォームを動的に作成します。これを参考にしてください...

お役に立てれば

1
Leon

ユーザーの資格情報を非表示にしたり難読化したりする必要がない場合は、単純なGET認証を使用してください。usehttp://username:[email protected]/ の代わりに http://MyApi.com/

1
Wumms