CakePHP 3：发送jQuery-Tabledit的Ajax Post请求时出现禁止错误

Question

我尝试在我的表上实现jQuery-Tabledit（https://markcell.github.io/jquery-tabledit/）时收到403禁止错误。经研究，问题似乎与授权有关，但是我不知道如何解决。我既不使用AuthComponent也不使用SecurityComponent。

Template / User / index.ctp

<div class="user index large-9 medium-8 columns content">
    <h3><?= __('User') ?></h3>
    <table id="table" cellpadding="0" cellspacing="0">
        <thead>
            <tr>
                <th scope="col">Id</th>
                <th scope="col">Name</th>
                <th scope="col">Email</th>
            </tr>
        </thead>
        <tbody>
            <?php foreach ($user as $user): ?>
            <tr>
                <td><?= $this->Number->format($user->id) ?></td>
                <td><?= h($user->name) ?></td>
                <td><?= h($user->email) ?></td>
            </tr>
            <?php endforeach; ?>
        </tbody>
    </table>
</div>

<?= $this->Html->script('/js/table_edit_test') ?>

webroot / js / table_edit_test.js

$(document).ready(function(){
    $('#table').Tabledit({
        url:"/user/testing",
        columns: {
            identifier: [0, 'id'],
            editable: [[1, 'name'], 
            [2, 'email']]
        },

        onSuccess: function(data, textStatus, jqXHR) {
            console.log('onSuccess(data, textStatus, jqXHR)');
            console.log(data);
            console.log(textStatus);
            console.log(jqXHR);
        },

        onFail: function(jqXHR, textStatus, errorThrown) {
            console.log('onFail(jqXHR, textStatus, errorThrown)');
            console.log(jqXHR);
            console.log(textStatus);
            console.log(errorThrown);
        },

        onAjax: function(action, serialize) {
            console.log('onAjax(action, serialize)');
            console.log(action);
            console.log(serialize);
        },
    });
});

UserController.php

public function index() {
    $user = $this->paginate($this->User);

    $this->set(compact('user'));
}

public function testing() {
    $this->autoRender = false;
    if($this->request->is('Ajax')) {
        $input = filter_input_array(INPUT_POST);

        if($input["action"] === 'edit') {
            $user = $this->User->get($input["id"]);
            $user->name = $input["name"];
            $user->email = $input["email"];
            $this->User->save($user);
        }

        return json_encode($input);
    }
}

AppController.php

public function initialize() {
    parent::initialize();

    $this->loadComponent('RequestHandler', [
        'enableBeforeRedirect' => false,
    ]);
    $this->loadComponent('Flash');

    /*
     * Enable the following component for recommended CakePHP security settings.
     * see https://book.cakephp.org/3.0/en/controllers/components/security.html
     */
    //$this->loadComponent('Security');
}

调试屏幕截图：

任何帮助将不胜感激。

Answer 1

403错误来自CSRF-Token，即使您未选择使用该组件，它也会在CakePHP 3.6及更高版本中自动添加。感谢502_Geek帮助我找出原因。我的解决方法：

在src / Template / Layout / default.ctp中：添加标题

<head>
<!--Get CSRF-Token -->
<meta name="csrf-token" content="<?= $this->request->getParam('_csrfToken') ?>" />
</head>

在webroot / js / jquery.tabledit.js中：将$.post()更改为$.ajax()并将CSRF-Token添加到标头：

var jqXHR = $.ajax({
    type: "POST",
    url: settings.url,
    headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')},
    data: serialize,
    success: function(data, textStatus, jqXHR) {

        if (action === settings.buttons.edit.action) {
            $lastEditedRow.removeClass(settings.dangerClass).addClass(settings.warningClass);
            setTimeout(function() {
                //$lastEditedRow.removeClass(settings.warningClass);
                $table.find('tr.' + settings.warningClass).removeClass(settings.warningClass);
            }, 1400);
        }

        settings.onSuccess(data, textStatus, jqXHR);
    },
    dataType: 'json'
});

在webroot / js / table_edit_test.js中：使用完整链接作为URL：

url: 'https://localhost/user/testing',

给任何像我这样开始学习JavaScript的新手注意：

F12->控制台：读取console.log（）
F12->网络->单击具有错误状态的文件->参数：从Ajax读取$ _POST
F12->网络->单击具有错误状态的文件->响应：读取错误的主要原因（CSRF不匹配，找不到对象等）

CakePHP 3：发送jQuery-Tabledit的Ajax Post请求时出现禁止错误

问题描述投票：0回答：1

1个回答

最新问题

CakePHP 3：发送jQuery-Tabledit的Ajax Post请求时出现禁止错误

问题描述 投票：0回答：1

1个回答

最新问题

问题描述投票：0回答：1