CakePHP3〜第二个函数的CSRF令牌不匹配

Question

我目前正在开发一个JavaScript可靠的系统，该系统可将CakePHP 3框架用作后端。我的面板中的所有操作都在同一页面/ URL上执行，这是一个一页应用程序。目前，我有很多函数在工作，并决定是时候研究CakePHP 3的CSRF组件了。启用它后，我收到了400错误，表明没有给出CSRF令牌。经过大量研究，我得出了解决方案，该解决方案是使用FormMaker修复的，或者是在JQuery ajax请求中手动实现令牌的解决方案。这行得通，所以我决定也要在下一个功能中实现它。但是您可能会猜到，这没有用。第二个ajax请求给出了CSRF令牌不匹配。请在下面查看我的代码：

我的第一个实际有效的请求：

function getSectionData(controller, method = null) {
    fetch("<?=$this->Url->build(['controller' => '']);?>" + "/" + controller + "/getSectionData", {
            method: 'POST',
            headers: {
                "Content-Type": "application/json",
                "X-CSRF-Token": <?= json_encode($this->request->param('_csrfToken')); ?>
            },
            body: JSON.stringify({
                method: method
            })
        })
            .then((res) =>
                res.json())
            .then((data) => {
                console.warn(data);
                let response = data.response;

                if (response.success == 1) {
                    // Action to do when data has been received
                    let method = response.method;
                    let rows = response.rows;

                    window[method](controller, rows);
                } else if (response.success == 0) {
                    // Message when an error occures

                }

            })
            .catch((err) => console.log(err))
}

最终第二个功能在不到一秒钟的时间内被激活：

function renderElement(element, id, data = null) {
    let path = "<?= $this->request->here; ?>" + "/renderElement/" + element;
    $('#' + id).load(path, {
        data: data, 
        headers: {
            "X-CSRF-Token": <?= json_encode($this->request->param('_csrfToken')); ?>
        }
    });
}

在此功能中，我从另一个可以包含数据元素的文件中加载预设的HTML元素，这就是为什么它首先从控制器请求数据的原因。我使用与第一个函数相同的标题，并且控制台中存在CSRF令牌。但是它不起作用，并引发不匹配错误。我想知道为什么会出现此错误，以及如何解决该错误，例如，是否必须刷新它以及如何刷新？

注意，在3.6更新之前，我使用的是CakePHP 3版本，该版本删除了CSRF组件并添加了CRSF中间件。

提前感谢。

Answer 1

jQuery.load()函数不接受AJAX配置参数，第二个参数是回调，或者是定义要与请求一起提交的POST数据的对象。

您要么必须切换到使用可配置的AJAX请求（例如，如您的第一个代码段所示，要么要全局配置jQuery以为所有AJAX请求设置所需的标头：

$.ajaxSetup({
    headers: {
        'X-CSRF-Token': <?= json_encode($this->request->param('_csrfToken')); ?>
    }
});

另请参见

• https://api.jquery.com/load/
• https://api.jquery.com/jQuery.ajaxSetup/