如何将FullCalendar的GET请求改为POST请求以解决403错误

我来帮你搞定这个问题！FullCalendar默认用GET请求拉取事件，但我们可以通过自定义事件源函数轻松改成POST请求，完全不用修改Apache配置，完美避开URL长度限制的坑。

核心思路 #

FullCalendar的events参数不仅支持直接传入URL或静态数组，还支持传入一个自定义函数。这个函数会在需要加载事件时（比如初始化、切换视图）被调用，我们可以在函数内部手动发送POST请求，再把结果返回给FullCalendar。

代码实现（原生JS版） #

假设你原来的初始化代码是直接指定PHP脚本URL，现在改成这样：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    // 用自定义函数替代直接传URL
    events: function(info, successCallback, failureCallback) {
      // 用fetch发送POST请求
      fetch('你的PHP脚本路径.php', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded',
          // 如果你的项目有CSRF防护，记得在这里添加对应的请求头，比如：
          // 'X-CSRF-Token': document.querySelector('meta[name="csrf-token"]').content
        },
        // 把FullCalendar提供的视图起止日期作为POST参数传给后端
        body: new URLSearchParams({
          start: info.startStr,
          end: info.endStr
          // 如有其他自定义参数，直接在这里追加即可
        })
      })
      .then(response => {
        if (!response.ok) throw new Error('请求失败');
        return response.json();
      })
      .then(eventsData => {
        successCallback(eventsData); // 把事件数据传给FullCalendar渲染
      })
      .catch(error => {
        console.error('加载事件出错:', error);
        failureCallback(error); // 通知FullCalendar请求失败
      });
    }
  });
  calendar.render();
});

代码实现（jQuery版） #

如果你习惯用jQuery的AJAX，也可以这样写：

document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    events: function(info, successCallback, failureCallback) {
      $.ajax({
        url: '你的PHP脚本路径.php',
        type: 'POST',
        data: {
          start: info.startStr,
          end: info.endStr
        },
        dataType: 'json',
        success: function(eventsData) {
          successCallback(eventsData);
        },
        error: function(xhr, status, err) {
          console.error('加载事件出错:', err);
          failureCallback(err);
        }
      });
    }
  });
  calendar.render();
});

后端PHP适配 #

记得修改你的PHP脚本，从$_POST而不是$_GET中获取参数（如果你的脚本原本是根据起止日期过滤事件的话）：

<?php
// 获取POST参数
$startDate = $_POST['start'] ?? '';
$endDate = $_POST['end'] ?? '';

// 执行SQL查询（根据起止日期过滤事件，按需调整）
$sql = "SELECT * FROM events WHERE start_time >= ? AND end_time <= ?";
// ... 执行查询、处理结果 ...

// 返回JSON格式的事件数据
echo json_encode($eventsResult);
?>

额外提示 #

如果你的事件数据是静态的（不需要根据视图日期动态过滤），也可以直接把PHP生成的JSON数据注入到JS中，跳过AJAX请求：

<?php
// 从数据库查询并转成JSON
$staticEvents = json_encode($yourSqlResults);
?>
<script>
document.addEventListener('DOMContentLoaded', function() {
  const calendarEl = document.getElementById('calendar');
  const calendar = new FullCalendar.Calendar(calendarEl, {
    events: <?php echo $staticEvents; ?> // 直接用静态数据
  });
  calendar.render();
});
</script>

这种方式更简单，但适合数据量不大的场景。

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