JQuery 发送带有标题的 Ajax GET 并在新窗口/选项卡中打开答案

【问题标题】：JQuery send Ajax GET with Headers and open in new Window/TabJQuery 发送带有标题的 Ajax GET 并在新窗口/选项卡中打开
【发布时间】：2015-12-07 08:42:37
【问题描述】：

我正在发送一个 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')

【问题讨论】：

如果您需要在新标签中找到结果，为什么要发送 ajax ？
因为我需要将“标头”传递到请求中。是否有另一种方法可以在不使用 $.Ajax 的情况下将标头传递到 GET/POST 请求中？

标签： javascript jquery ajax

【解决方案1】：

确实如此。您可以使用新的fetch API 和res.blob() 方法来检索Blob，然后URL.createObjectURL 可用于创建浏览器可以解析的文件的临时URL。然后，您可以在新选项卡中打开该 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"));

【讨论】：

【解决方案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'];
     }
?>

【讨论】：

为什么是隐藏表单？我需要将身份验证令牌传递到标头中，为什么带有 POST 的表单和带有 GET 的 ajax 请求？此外，这不是打开浏览器的新选项卡/窗口，它只是一个重定向，所以对我来说没用
身份验证加载到您的 ajax 请求和隐藏表单中，仅用于显示结果。
这不可能这个功能创建新标签，可能你的浏览器不标准或有弹出拦截器。