Question

我发送一个AJAX GET请求，其中传递了一些头参数。不是URL参数，而是以下列方式标题：

$.ajax({
         url: "http://localhost/myendpoint/ABCDE-12345",
         headers: { 'X-Auth-Token' : myTokenId},             
         type: "GET",
         success: function() { 

                  }
         });

此端点返回一个文件，但需要通过传递到请求标头的OAuth令牌进行身份验证。当返回请求时，我应该将返回的文件显示到浏览器的新选项卡/窗口中。这可能吗？

如果没有身份验证，我们可以通过这种方式发送请求，并且可以正常运行：

window.open('http://localhost/myendpoint/ABCDE-12345', '_blank')

Answer 1

肯定是的。您可以使用新的 fetch API 和它的 res.blob() 方法来检索 Blob，然后可以使用 URL.createObjectURL 创建浏览器可以解析的文件的临时 URL。然后您可以在新标签页中打开该网址

fetch("http://localhost/myendpoint/ABCDE-12345", {
  headers: { 'X-Auth-Token' : myTokenId },             
  method: "GET"
})
.then(response => response.blob())
.then(blob => window.open(URL.createObjectURL(blob), "_blank"));

Answer 2

将此函数添加到js：

      function submit_post_via_hidden_form(url, params) {
           var f = $("<form target='_blank' method='POST' style='display:none;'></form>").attr({
               action: url
           }).appendTo(document.body);

            for (var i in params) {
              if (params.hasOwnProperty(i)) {
                 $('<input type="hidden" />').attr({
                    name: i,
                    value: params[i]
                 }).appendTo(f);
              }
        }

        f.submit();

        f.remove();
    }

将您的代码更改为：

   $.ajax({
     url: "http://localhost/myendpoint/ABCDE-12345",
     headers: { 'X-Auth-Token' : myTokenId},             
     type: "GET",
     success: function(e) { 
         submit_post_via_hidden_form("http://localhost/myendpoint/ABCDE-12345/preview.php", {'preview':e})
        }
     });

现在创建preview.php：

<?php 

    if (isset($_POST['preview'])){
        echo $_POST['preview'];
     }
?>

JQuery使用Headers发送Ajax GET并在新的Window / Tab中打开

2 个答案: