如何为网页上的链接设置“接受页眉”

How can I set the Accept Header for a link on a web page?

本文关键字：接受页眉 设置 网页 链接      更新时间：2024-02-10

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

我想我还不如把这篇文章放在这里，供下一千人阅读。你做不到。

更新：

我将把我最初的答案留给后人，但现在我发现我并没有真正回答这个问题。没有一种方法可以"本地"实现这一点，我能想到的最好的方法是使用数据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;

原始答案

没有内置的方法来强制链接上的"Accept"标头（通过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();
}

在下载链接中添加数据接受属性：

<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;

不确定这是否是你想要的，但希望它能有所帮助。

对于那些仍然感兴趣的人来说，有一种方法可以用纯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
            }
    });
相关文章：