2011-12-14 4 views
13

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

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

ありがとうございます。

答えて

8

より最近のブラウザでは、ブロブを使用することができるかもしれませんあなたはノードでバックエンドをテストすることができ :

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

これはうまくいくようです。試しましたか? – IsmailS

+1

はい、Chrome 48 - > Node 0.12 マークアップしてください: – malix

+0

最新の主要ブラウザがサポートしています。しかしまだドラフトで。 https://developer.mozilla。org/ja/docs/Web/API/URL/createObjectURL#Browser_compatibility – IsmailS

-2

$.ajaxbeforeSendで設定する必要があります。下の例では、しかし、私は確かに正確なセットアップがあなたのために見るためのコードなしで動作するかわからない。

$.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が必要です。

+0

は非常にレスポンスがブラウザによってレンダリングされるPDFドキュメントで、私は信じて質問に答えていません。 –

+0

もう一度明確にしましょう。私はajaxリクエストのヘッダーを設定する必要はありません。私はページの完全なGET要求のヘッダーを設定したい。私はすでに 'beforeSend'を使ってすべてのAjaxリクエストのヘッダーを設定しています。 – IsmailS

1

ユーザーの資格情報を隠したり難読化を気にしない場合は、単なるGETの真偽を使用します。代わりにhttp://MyApi.com/

+0

お返事ありがとうございます。私はカスタム認証メカニズムを持っています。 :(だから、 'authorization'ヘッダの値は' CompanyNameToken 'のようになります。このようないくつかの癖がある場合、URLにトークンを含めても構いません。 – IsmailS

1

の 使用http://username:[email protected]/それがGETでなければなりませんか?

私が尋ねるのは、新しいウィンドウに埋め込みファイルを表示しているものだけを投稿するPOSTフォーム(target = "_ BLANK")を持つことができるということです。もちろん、これはあなたのカスタムヘッダーの問題を解決することはできませんが、jquery.ajaxを使用してPOSTすることもできます。これにより、独自のヘッダを設定することができます。

jQuery pluginは、このようなフォームを動的に作成してファイルをダウンロードします。あなたは、これが

1

に役立ちます...参考に

希望を、これを使用することができ、私は、これはあなたが探しているものだと思う...または私は間違っているなら、私を修正します。頼む、ユーザー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> 

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

P.S.を

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

関連する問題