Kendo UI DataSource Transport如何配置请求头携带Bearer Token？

Kendo UI DataSource 的 transport.read 配置会直接透传给底层 jQuery AJAX 请求，支持所有 jQuery AJAX 原生配置项，无需在 transport 顶层找单独的请求头配置入口。

静态配置（令牌初始化后不会变更） #

直接将 headers 配置写入 read 对象即可，修改后的配置示例：

dataSource: {
    transport: {
        read: {
            contentType: 'application/json',
            dataType: 'json',
            type: 'GET',
            url: '/server/api/user/query.php/',
            // 新增请求头配置
            headers: {
                'Authorization': `Bearer ${utility.getJsonWebToken()}`
            }
        }
    },
    pageSize: 20,
    schema: {
        data: 'records',
        id: 'UserId',
        model: {
            UserId: { editable: false, nullable: true },
            FirstName: { validation: { required: true } },
            LastName: { validation: { required: true } },
            Email: { validation: { required: true } },
            CreatedOn: { editable: false, type: 'date' },
            CreatedBy: { editable: false, type: 'number' },
            CreatedByFullName: { editable: false },
            ModifiedOn: { editable: false, type: 'date' },
            ModifiedBy: { editable: false, type: 'number' },
            ModifiedByFullName: { editable: false },
            DeletedOn: { editable: false, type: 'date' }
        },
        total: 'total'
    }
}

动态配置（令牌存在过期刷新逻辑，推荐） #

如果令牌会在后续业务中动态更新，不要静态写死headers，改用 beforeSend 回调在每次请求发送时动态获取最新令牌，避免使用失效旧令牌：

transport: {
    read: {
        contentType: 'application/json',
        dataType: 'json',
        type: 'GET',
        url: '/server/api/user/query.php/',
        beforeSend: function(xhr) {
            xhr.setRequestHeader('Authorization', `Bearer ${utility.getJsonWebToken()}`);
        }
    }
}

补充说明 #

• 若后续新增 create/update/destroy 等其他transport操作，需要携带相同请求头，可将上述headers或beforeSend逻辑抽到transport顶层，Kendo会自动将配置合并到所有子操作的AJAX请求中。
• 未找到配置入口的原因：headers 是底层AJAX通用参数，不属于DataSource transport的顶层专属配置，直接写在read子配置内即可生效。

内容的提问来源于stack exchange，提问作者David