Fullcalendar 4.x - 添加标题“X-Requested-With: XMLHttpRequest”答案

【问题标题】：Fullcalendar 4.x - Adding header "X-Requested-With: XMLHttpRequest"Fullcalendar 4.x - 添加标题“X-Requested-With: XMLHttpRequest”
【发布时间】：2020-03-01 04:56:35
【问题描述】：

使用 Fullcalendar 4.x，是否可以在获取事件时添加“X-Requested-With: XMLHttpRequest”标头？

我是这样设置事件源的：

calendar.addEventSource({ url: ev_url, id: 'default' });

一切正常，请求发送正确，但我提到的标头丢失（在服务器端，我们要求该标头存在）。

我尝试将以下内容添加到 addEventSource：

beforeSend: function (xhr) {
  xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
}

我尝试的另一件事是将其添加到 js 文件中（可能毫无意义，因为 Fullcalendar 4 不再使用 jquery 了？）：

$.ajaxSetup({
  beforeSend: function (xhr) {
    xhr.setRequestHeader('X-Requested-With', 'XMLHttpRequest');
  }
});

不幸的是，这两种解决方案都不起作用。

过去在使用 fullcalendar 3.x 时，请求事件时会出现该标头。我猜那是因为 JQuery 会自动添加它。

【问题讨论】：

当仅使用 URL 作为事件源时，您似乎无法通过 API 指定标头。我认为您必须改为实现事件即函数模式并自己处理 AJAX 代码。 fullcalendar.io/docs/events-function

标签： fullcalendar fullcalendar-4

【解决方案1】：

我也在寻找这个问题的答案。我修改了 FullCalendar main.js 文件，虽然不是很理想，但可以解决问题！

我在第 4242 行修改了文件 @ 这里是该函数的完整源代码：

 /*! FullCalendar Core Package v4.3.1

    function requestJson(method, url, params, successCallback, failureCallback) {
    method = method.toUpperCase();

    // Set Headers From Params to own varaible
    var headers;
    if(params.hasOwnProperty('headers') && Array.isArray(params.headers)){
      headers = params.headers;
      // Remove them from the params object
      delete params.headers;
    }

    var body = null;
    if (method === 'GET') {
        url = injectQueryStringParams(url, params);
    }
    else {
        body = encodeParams(params);
    }
    var xhr = new XMLHttpRequest();
    xhr.open(method, url, true);        

    // Create Headers If Avaiable
    if(typeof headers !== "undefined"){
        for(var key in headers){
          if (!headers.hasOwnProperty(key)) continue;
            var obj = headers[key];
            for(var prop in obj){
                if (!obj.hasOwnProperty(prop)) continue;
                xhr.setRequestHeader(prop, obj[prop]);
            }
        }           
    }

    if (method !== 'GET') {
        xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
    }

    xhr.onload = function () {
        if (xhr.status >= 200 && xhr.status < 400) {
            try {
                var res = JSON.parse(xhr.responseText);
                successCallback(res, xhr);
            }
            catch (err) {
                failureCallback('Failure parsing JSON', xhr);
            }
        }
        else {
            failureCallback('Request failed', xhr);
        }
    };
    xhr.onerror = function () {
        failureCallback('Request failed', xhr);
    };
    xhr.send(body);
}

要使用它，我只需将 headers 键添加到 extraParams 对象，如下所示：

extraParams = {
        action: 'get_event',
        headers: [
            {"X-Requested-With":"XMLHttpRequest"}
        ]
};

通过这种方式，您可以根据需要添加任意数量的额外标题。

【讨论】：