Getting bad request (#400) on Ajax calls using Yii

Question

This is my code:

$(document).on('change', '#tblhotel-int_zone_id', function(e){
    var zoneId = $(this).val();
    var form_data = {
        zone: zoneId
    };
    $.ajax({
        url: "state",
        type: "POST",
        data: form_data,
        success: function(response)
        {
            alert(response);
        }
    });
});

This shows:

Bad Request (#400): Unable to verify your data submission.

And I already have <?= Html::csrfMetaTags() ?>. How can I fix this problem?

Answer 1

Note: See the answer from Skullcrasher to fix the issue in the correct way as my answer suggests disabling the Cross-Site Request Forgery.

---

You have a problem with enableCsrfValidation. To read more about it you can read here.

To disable CSRF, add this code to your controller:

public function beforeAction($action) {
    $this->enableCsrfValidation = false;
    return parent::beforeAction($action);
}

This will disable for all actions. You should probably, depending on the $action, disable it only for specific actions.

Answer 2

Add this code at the bottom of your layout:

<script>
    $.ajaxSetup({
        data: <?= \yii\helpers\Json::encode([
            \yii::$app->request->csrfParam => \yii::$app->request->csrfToken,
        ]) ?>
    });
</script>

Answer 3

Although it is an old post with alot of answers but there is something missing from all the answers posted, all of them addressed the correct point but when calling the ajax POST request along with your data you should use the yii.js functions provided

• yii.getCsrfParam() to get the parameter name of the token
• yii.getCsrfToken() to get the token or actual value of the csrf-token

As if you have different param name for front-end defined inside the config.php or web.php under the request components configurations

components=>[
.......
.......
    'request' => [
        'csrfParam' => '_csrf-frontend',
    ],
.......
.......
]

then you need to get that name dynamically and the above function help you out.

You should

var form_data = {
    zone: zoneId
};
form_data[yii.getCsrfParam()]=yii.getCsrfToken();

Answer 4

Use:

var csrfToken = $('meta[name="csrf-token"]').attr("content");
$.ajax({
    url: 'request',
    type: 'post',
    dataType: 'json',
    data: {param1: param1, _csrf : csrfToken},
});

More detail: Yii2: Using csrf token

Answer 5

/backend/config/main-local.php

'components' => [
    'request' => [
        'cookieValidationKey' => 'unique code',
        'csrfCookie' => ['httpOnly' => true, 'path' => '/admin/'],
    ],
],

/frontend/config/main-local.php

'components' => [
    'request' => [
        'cookieValidationKey' => 'unique code',
        'csrfCookie' => ['httpOnly' => true, 'path' => '/'],
    ],
],

Answer 6

As the answer from Mihai P. states, your problem is CSRF validation. It is also true that you could disable the validation for your actions, but this is not considered a good solution.

As you have a problem in your Ajax request with the validation, you could also use a Yii JavaScript function to add the CSRF token to your formdata that you send in the Ajax request.

Just try to add the token to your form data as follows:

var form_data = {
    zone: zoneId,
    _csrf: yii.getCsrfToken()
};

I hope this helps and you therefore don't have to disable CSRF validation.

In addition to manually add the CSRF token you can check if there is an X-CSRF header set in the request.