Why it shows 403(forbidden) when making an ajax request?

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

Please add dataType and a forward slash (/) at the end of your request URL

$.ajax({
        url : ROOT + 'products/rate_video/',
        type : 'POST',
        data : {
            'data[Product][id]' : productId,
            'data[Product][success_rate]' : videoRate
        },
        dataType: 'json',
    }).done(function(res){

Answer 2

I just had the same problem and solved it by putting the URL within AJAX call to a URL that I know works. Then try accessing the URL that you are trying to invoke via AJAX directly within the web browser - most likely you are accessing a controller that does not have a view file created. To fix this you have to ensure that the controller method being accessed does not have a view to be rendered - set $this->render(null)

Answer 3

1. If you have incorrect url then

    url: '<?php echo Router::url(array('controller' => 'Controllername', 'action' => 'actionname')); ?>' 

   this above url provide ajax to url from root to your action.

2. And other cause for 403 is your auth function, if your using auth in your controller then make your ajax function allow like

    $this->Auth->allow('Your ajax function name here'); 

Answer 4

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>