Kendo UI Upload设置Authorization请求头时触发InvalidStateError求助

我来帮你搞定这个问题——你碰到的InvalidStateError，本质是因为在XMLHttpRequest不允许修改请求头的阶段调用了setRequestHeader方法。

问题根源 #

你的代码里通过监听readystatechange事件，等着readyState === 1（OPENED状态）再设置请求头，但Kendo UI Upload的upload事件触发时，内部可能已经推进了XHR的状态，或者这个监听事件触发时，XHR已经进入了无法修改请求头的阶段（比如已经调用了send()），这时候再去设置头自然会抛出异常。

两种可行的解决方案 #

方案1：直接在upload事件中设置请求头

upload事件触发时，XHR已经初始化完成但还没发送请求，这时候直接设置请求头是完全安全的，不需要额外监听状态变化：

$("#files").kendoUpload({
    async: {
        saveUrl: myApiUrl + "/" + id,
        autoUpload: true
    },
    upload: function(e) {
        var xhr = e.XMLHttpRequest;
        if (xhr) {
            // 直接设置Authorization头，无需监听readystatechange
            xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
        }
    }
});

方案2：使用async配置的beforeSend钩子

Kendo UI Upload的async配置自带beforeSend函数，这是专门为修改XHR请求设计的钩子，用法更简洁直观：

$("#files").kendoUpload({
    async: {
        saveUrl: myApiUrl + "/" + id,
        autoUpload: true,
        beforeSend: function(xhr) {
            xhr.setRequestHeader("Authorization", "Bearer " + accessToken);
        }
    }
});

这两种方法都能彻底避免InvalidStateError，个人更推荐方案2，因为它贴合Kendo的API设计，代码也更清爽。

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