为什么在发出ajax请求时会显示403（禁止）？

Question

I've made an ajax call with this:

$('.start-rate-fixed').on('click', function(e){
        e.preventDefault();
        var videoRate = $('.start-rate input[name="rating"]:checked').val(),
            productId = parseInt($('.popover-content').prop('id'));
        $.ajax({
            url : ROOT + 'products/rate_video',
            type : 'POST',
            data : {
                'data[Product][id]' : productId,
                'data[Product][success_rate]' : videoRate
            }
        }).done(function(res){
            var data = $.parseJSON(res);
            alert(data);
        });
    });

Where I defined ROOT as the webroot of my cakephp project in my default.ctp with this:

<script type="text/javascript">
    var ROOT = '<?php echo $this->Html->url('/');?>';
</script>

and trying to retrieve data from a function "rate_video" defined in my products controller but I get this error. Also I've tried a simple ajax for a test function but it showed me the same issue.

Controller Code

public function rate_video(){
        $this->autoRender = false;
        if($this->request->is('post') && $this->request->is('ajax')){
            $success_rate = $this->request->data['Product']['success_rate'];
            $this->Product->id = $this->request->data['Product']['id'];
            if($this->Product->saveField('success_rate', $success_rate)){
                echo json_encode('Successfully Rated');
            } else {
                echo json_encode('Error!!');
            }
        }
    }

Answer 1

Your script placed at localhost/dev.popover/products/rate_video but ajax ROOT is / - that mean localhost/ and ajax sent request to

'localhost/products/rate_video'

Right solution is

<script type="text/javascript">
    var ROOT = '<?php echo $this->Html->url('/dev.popover/');?>';
</script>