经过身份验证的 AJAX 文件下载

Question

我正在将 Intranet 与文档管理系统集成。 DMS 有一个 SOAP API。我们构建了一个客户端，它接收 REST 调用、发出 SOAP 调用并返回 JSON 或文档数据。

问题是 AJAX 文件下载的所有解决方案似乎都使​​用 iFrame（请参阅John Culniver's filedownload plugin）。

我不能使用它，因为我需要在标头中提供身份验证凭据。我能想到的唯一其他潜在解决方案是使用window.open（如果我可以通过浏览器弹出窗口阻止）。

有没有人有其他潜在的解决方案，或者如何使用 window.open 做到这一点？

谢谢

Answer 1

我认为这个问题没有客户端解决方案。 window.open 不会让您设置请求标头。您需要执行一些操作，例如向服务器发送 cookie 或其他值，并添加服务器端代码以减少对请求标头的需求。

查看以下问题的答案：

• Offer a generated file for download from jQuery post
• How to set a Header field on POST a form?

Answer 2

我能够成功地做到这一点。我是我的示例，我使用的是基本身份验证，但是您可以将 Authorization 标头替换为不同的值（例如，您可以将其替换为 Bearer Yourtokenvalue。

这里是代码sn-p

$(document).on("click", "#btn", function() {

  var username = "yourUserNameForBasicAuthentication";
  var password = "yourPasswordForBasicAuthentication"

  console.log("button clicked");
  var request = new XMLHttpRequest();
  request.open("GET", $("#txtUrl").val().trim(), true);

  //Set the authorization headers
  request.setRequestHeader("Authorization", "Basic " + window.btoa(username + ":" + password));

  //Set the Response type as blob which means raw data
  request.responseType = "blob";

  //We will initiate a default file name in case no file name is detected later on from headers of HTTP Request
  var fileName = "unnamed.pdf";
  request.onload = function(event) {
    if (request.status == 200) {
      console.log("success response received");
      var blob = request.response;

      //Getting contenttype from response headers
      var contentType = request.getResponseHeader("content-type");
      if (contentType == null) {
        contentType = "application/pdf";
      }

      //Check 'Content-Disposition' header to get filename of file (if possible)
      if (request.getResponseHeader("Content-Disposition")) {
        var contentDisposition = request.getResponseHeader("Content-Disposition");
        fileName = contentDisposition.substring(contentType.indexOf("=") + 1);
      }

      if (window.navigator.msSaveOrOpenBlob) {
        // Internet Explorer
        window.navigator.msSaveOrOpenBlob(new Blob([blob], {
          type: contentType
        }), fileName);
      } else {
        var el = document.createElement("a");
        document.body.appendChild(el);
        el.href = window.URL.createObjectURL(blob);
        el.download = fileName;
        el.click();
        el.remove();
        window.URL.revokeObjectURL(el.href);
      }


    } //end of Status code
    else {
      alert("System failed to authenticate");
    }

  } //End of event
  request.send();

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" value="https://yoursamplefile.txt" id="txtUrl" style="width:100%" /><br />
<input type='button' value='Download File' id='btn' />