javascript - Ajax错误403禁止CodeIgniter

Question

我的 html 页面上有两个链接:

<a id="1" onclick="like(this.id)">first</a>
<a id="2" onclick="like(this.id)">Second</a>

我的JS如下:

function like (id) {
    $.ajax({
        type:'POST',
        data: {
            func:
                'getNewLocations',
            '<?php echo $this->security->get_csrf_token_name(); ?>':
                '<?php echo $this->security->get_csrf_hash(); ?>',
            message:id
        },
        url:'<?php echo base_url();?>index.php/Category/like',
        success: function(result, statut) {
            if (result == 'add') {
                //do something
            }
            else if (result == 'remove') {
                //do something
            }
        }
    });
}

php 方法如下(仅用于示例):

public function like() {
    echo 'add';
}

当我第一次点击链接 1 时，ajax 请求工作正常，服务器回答“添加”。但是当我点击链接2时，出现403错误。更令人惊讶的是，当我第一次单击链接 2 时，它可以工作，但链接 1 却不起作用。 我使用 codeIgniter。

知道为什么以及如何解决它吗？ 谢谢

Answer 1

由于您似乎正在使用 CSRF token 来验证请求，因此任何发送无效 token 的请求都将被拒绝。

当您第一次单击任一 anchor 时，您就会用完该 token 。因此，为了发出额外的请求，您需要在响应中获取一个新的 token 并使用它来代替旧的 token 。

您只需发回您的数据值，"add"在这种情况下，您的 csrf 值:get_csrf_token_name()和get_csrf_hash()

例如，您可以发送回包含这些值的 JSON 值，而不是仅发送回纯文本

php 脚本

function like(){
   $output = new stdClass;
   $output->csrfName = $this->security->get_csrf_token_name();
   $output->csrfHash = $this->security->get_csrf_hash();
   $output->data = "add";
   echo json_encode($output);
}

在 JavaScript 中

//Initial csrf values
var csrfName = '<?php echo $this->security->get_csrf_token_name();?>';
var csrfHash = '<?php echo $this->security->get_csrf_hash();?>';
function like (id) {
    //create data object here so we can dynamically set new csrfName/Hash
    var data = {
       func:'getNewLocations',
       message:id
    };
    data[csrfName] = csrfHash;

    $.ajax({
        type:'POST',
        data: data, 
        //dataType tells jQuery to expect JSON response
        dataType:"json",
        url:'<?php echo base_url();?>index.php/Category/like',
        success: function(result, statut) {
            if(result.csrfName){
               //assign the new csrfName/Hash
               csrfName = result.csrfName;
               csrfHash = result.csrfHash;
            }
            if (result.data == 'add') {
                //do something
            }
            else if (result.data == 'remove') {
                //do something
            }
        }
    });
}

请注意，如果您支持支持 ECMAScript 2015 的浏览器，则可以使用 computed keys在数据对象初始值设定项中设置 csrf 值

    $.ajax({
        type:'POST',
        data: {
            [csrfName]:csrfHash,
            func:'getNewLocations',
            message:id
        },