403 Forbidden error using ajax in CodeIgniter

Question

I am displaying the first name in my textbox autocomplete using ajax but my ajax URL is not working. It's every time showing in the network tab

403 Forbidden.

I tried ajax URL like this

 url:baseUrl + "/index.php/Employee_control/search_with_emp_name",
 url:baseUrl +"/Employee_control/search_with_emp_name",

But still showing the same error.

my .htaccess code

RewriteEngine on
RewriteCond $1 !^(index\.php|resources|robots\.txt)
RewriteCond %{REQUEST_FILENAME} !-f
RewriteCond %{REQUEST_FILENAME} !-d
RewriteRule ^(.*)$ index.php/$1 [L,QSA] 

My base URL is $config['base_url'] = 'http://localhost/test/';

My view

<input type="text" class="form_control" name="employee_name" id="employee_name">

custome.js

var getUrl = window.location;
var baseUrl = getUrl.protocol + "//" + getUrl.host + "/" + getUrl.pathname.split('/')[1];


    $(document).ready(function() {
       $("#employee_name").keyup(function() {
           var emp_name = $('#employee_name').val();
              $.ajax({
                   type: "POST",
                   url:baseUrl + "/index.php/Employee_control/search_with_emp_name",
                   data: {
                      emp_name: emp_name
                   },

                   success: function(html) {
                      alert(html);
                   }
               });
            });
    });

Controller

public function search_with_emp_name(){
        echo $emp_name = $this->input->post('emp_name');
       $get_result=$this->Employee_model->search_emp_name($emp_name);
       print_r($get_result);
}

Model

public function search_emp_name($emp_name){
          $this->db->like('firstname', $emp_name, 'both'); 
          $query = $this->db->get('tbl_employee');
          $result = $query->result();
        if($result)
            {
              return $result;
            }
            else 
            {
              return 0;
            } 

}

Answer 1

Hope this will help you :

First make sure your you have set csrf token to false in your config.php;

 $config['csrf_protection'] = FALSE;
 $config['csrf_token_name'] = 'csrf_test_name';
 $config['csrf_cookie_name'] = 'csrf_cookie_name';

OR if you don't want to set it to false just pass csrf_token_name and get_csrf_hash with data in your ajax call like this :

 data: {'<?php echo $this->security->get_csrf_token_name(); ?>':'<?php echo $this->security->get_csrf_hash(); ?>'},

It seems that problem is with your base url so Put this line of code in your header of the page and use BASE_URLlike this

<script type="text/javascript">
     const BASE_URL = "<?php echo site_url();?>";
</script>
<script src="<?=site_url('your-js-path/js/custome.js');?>"></script>

Your ajax should be like this :

$(document).ready(function() {
       $("#employee_name").keyup(function() {
           var emp_name = $('#employee_name').val();
              $.ajax({
                   type: "POST",
                   url: BASE_URL+"Employee_control/search_with_emp_name",
                   data: {emp_name: emp_name},

                   success: function(html) {
                      alert(html);
                   }
               });
            });
    });