Kendo 自动完成授权标头答案

【问题标题】：Kendo Autocomplete Authorization HeadersKendo 自动完成授权标头
【发布时间】：2015-11-18 20:28:25
【问题描述】：

我不明白为什么我的 Kendo 自动完成小部件没有将请求中的授权标头发送到服务器：

var dataSource = new kendo.data.DataSource({
    type: 'odata',
    serverFiltering: true,
    transport: {
        read: {
            url: myApiUrl,
            type: 'GET',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', myAuthorizationValue);
            }
        }
    }
});

$('#myAutocompleteField').kendoAutoComplete({
    dataTextField: 'fieldName',
    filter: 'contains',
    minLength: 3,
    dataSource: dataSource
});

当我在开发工具中检查服务器响应时，我收到来自服务器的 401 Unauthorized 错误。查看请求标头，我根本看不到 Authorization 属性。

我需要做些什么才能让 Authorization 标头包含在请求中？

更新：

我一直在探索这个问题。如果我只是在 Kendo DataSource 参数中使用与 transport.read 相同的对象执行典型的 $.ajax 请求，它会发送标头并获得成功的响应。

$.ajax({
    url: myApiUrl,
    type: 'GET',
    beforeSend: function (xhr) {
        xhr.setRequestHeader('Authorization', myAuthorizationValue);
    },
    success: function(res) {
        console.log('success!');
        console.log(res);
    }
});

【问题讨论】：

标签： jquery ajax kendo-ui

【解决方案1】：

根据this forum post on Telerik forum，当使用type: 'odata' 时，服务器期望使用JSONP 并且不会发送Auth 标头。

注释掉该行，如下所示，将发送 Auth 标头，但它使用过滤器数组发送搜索到的查询，而不是典型的 ODATA 参数（这是有道理的）：

var dataSource = new kendo.data.DataSource({
    //type: 'odata',  // this causes the auth headers to not be sent
    serverFiltering: true,
    transport: {
        read: {
            url: myApiUrl,
            type: 'GET',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', myAuthorizationValue);
            }
        }
    }
});

// Parameters sent
filter[filters][0][value]:sprint
filter[filters][0][operator]:contains
filter[filters][0][field]:fieldName
filter[filters][0][ignoreCase]:true
filter[logic]:and

有趣的是，我在 Internet 的其他地方发现有人使用 type: 'odata-v4'，它确实发送了 Auth 标头并正确发送了 ODATA 过滤器参数。

var dataSource = new kendo.data.DataSource({
    type: 'odata-v4',
    serverFiltering: true,
    transport: {
        read: {
            url: myApiUrl,
            type: 'GET',
            beforeSend: function (xhr) {
                xhr.setRequestHeader('Authorization', myAuthorizationValue);
            }
        }
    }
});

// Parameters Sent
$format:json
$filter:contains(tolower(fieldName),'sprin') // sprin is the search string
$count:true

【讨论】：