如何为网页上的链接设置 Accept Header？答案

【问题标题】：How can I set the Accept Header for a link on a web page?如何为网页上的链接设置 Accept Header？
【发布时间】：2013-12-03 20:39:40
【问题描述】：

这主要是一个象牙塔问题，因为我可以轻松地创建一个新的 URL 端点。但基本上，当用户将 Accept 标头配置为包含 text/csv 时，我希望能够提供 CSV。这在服务器端是微不足道的，但在客户端我不知道如何设置 Accept 标头，除非我使用 XHR 或其他一些“非浏览器”客户端。有没有办法在 HTML 中设置链接中的 Accept 标头，或者在 JS 中使用 window.location 时设置 Accept 标头？

【问题讨论】：

+1，这将是对协议特性的一个很好的利用。不幸的是，您将无法让浏览器设置它在普通链接上接受的内容。
这就是我对@Brad 的看法。不过问也无妨:)
我认为这是一个 HTML 缺陷。如果我们能够在 HTML 链接上设置接受和接受语言标题，生活会容易得多。例如。您不需要将该信息放入 URL 以使内容可缓存、可抓取等...虽然共享链接会困难得多...

标签： javascript html http

【解决方案1】：

我想我不妨把这个放在这里，让接下来的一千人看到这个帖子。你做不到。

【讨论】：

有人认为这个答案与这个问题有关，这对我来说有点好笑。它适用于不同的问题。

【解决方案2】：

更新：

我将在下面留下我原来的答案，但我现在发现我并没有真正回答这个问题。没有办法“本机”执行此操作，我能想到的最佳方法是使用数据 uri (http://en.wikipedia.org/wiki/Data_URI_scheme) 并让 AJAX 为您完成工作：

// aware that you didn't mention jQuery, but you can do this with or without
var download = function(){
    var mime = this.getAttribute('data-mime-type');
    $.ajax({
        accepts: mime,
        success: function(data){
            var uri = 'data:'+mime+';charset=UTF-8,' + encodeURIComponent(data);
            window.location = uri;
        }
    })
    return false;
}

与以下示例中使用的想法相同：

<a href="/some-csv-endpoint" data-mime-type="text/csv">Download CSV</a>

document.querySelectorAll('a[data-mime-type]').onclick = download;

原答案

没有内置方法可以强制链接上的“接受”标头（通过 HTML 或 Javascript）。我认为您可以使用非常少量的服务器和客户端代码轻松完成此任务。任何语言都应该很容易，我的例子是 PHP：

function get_accepted_headers() {
    $headers = apache_request_headers();
    if(array_key_exists('Accept', $headers)) {
        $accepted = explode(',', $headers['Accept']);
        return $accepted;
    }
    return array();
}

为您的下载链接添加 data-accept 属性：

<a href="/some-csv-file.csv" data-accept="text/csv">Download CSV</a>

然后附加一个点击事件处理程序以确保用户接受指定的内容类型：

// will end up with something like: ["text/html", "application/xhtml+xml", "application/xml;q=0.9", "image/webp", "*/*;q=0.8"]
var user_headers = <?=stripslashes(json_encode(get_accepted_headers()))?>;
var click_header_check = function() {
    var accept = this.getAttribute('data-accept');
    if(user_headers.indexOf(accept) == -1) {
        console.log('User does not explicitly accept content-type: %s', accept);
        return false;
    }
    window.location = this.href;
    return;
}

// attach the event listener
document.querySelector('a[data-accept]').onclick = click_header_check;

不确定这是否是您要找的，但希望对您有所帮助。

【讨论】：

是的，据我所知，这根本不能回答问题，因为假 Accept 中的内容不会发送到服务器。 IE 要清楚，我想 OVERRIDE 浏览器所说的内容
我想我对这个问题感到困惑，看来您想要一个链接来发送不同的请求标头，并且在使用 XMLHttpRequest 和使用 window.location 来“重定向”用户之外这是不可能的到data:... 网址

【解决方案3】：

对于那些仍然感兴趣的人，有一种方法可以在纯 javascript 中做到这一点。

以下代码使用 JQuery (https://jquery.com/) 和 FileSaver.js (http://purl.eligrey.com/github/FileSaver.js/blob/master/FileSaver.js) 虽然您可以自己编写相应的部分：

//in case of non binary data use:
var type = 'text/xml';
var url = 'http://your_url_here/'
$.ajax({accepts:{text:type},
        url:url,
        processData:false, 
        dataType:'text', 
        success:function(data){             
                saveAs(new Blob([data], {type: type}),'filename.txt');                                                                  
            }, 
        error: function(){
               // Handle errors here
            }
    });

【讨论】：