CakePHP 3: запрещенная ошибка при отправке Ajax Post запроса jQuery-Tabledit - PullRequest
Новая
       18

CakePHP 3: запрещенная ошибка при отправке Ajax Post запроса jQuery-Tabledit

0 голосов
/ 04 октября 2019

Я получил 403 Forbidden Error при попытке реализовать jQuery-Tabledit (https://markcell.github.io/jquery-tabledit/) на моей таблице. При исследовании кажется, что проблема связана с авторизацией, однако я понятия не имею, как исправить. Я не использую ниAuthComponent или SecurityComponent.

Шаблон / Пользователь / 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');
}

Снимок экрана отладки: Console

Debugger

Буду признателен за любую помощь.

1 Ответ

0 голосов
/ 08 октября 2019

Ошибка 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-токен в заголовок: 
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 -> Сеть -> Щелкните файл с состоянием ошибки -> Параметры: прочитайте $ _POST из Ajax
  • F12 -> Сеть -> Нажмитедля файла с состоянием ошибки -> Ответ: прочитать основную причину ошибки (несоответствие CSRF, объект не найден и т. д.)
...