title: jquery ajax not work with codeigniter rest api
body: <p>my rest api is fully worked when i test GET,POST,PUT,DELETE with POSTMAN in chrome,
  but when i access this with jquery ajax in index.html this not work <strong>stuck in "Connecting.."</strong></p>
  
  <p>this is my controller rest api in codeigniter</p>
  
  <pre><code>    &lt;?php
  
  defined('BASEPATH') OR exit('No direct script access allowed');
  
  require APPPATH . '/libraries/REST_Controller.php';
  use Restserver\Libraries\REST_Controller;
  
  class Belajar extends REST_Controller {
  
      function __construct($config = 'rest') {
      header('Access-Control-Allow-Origin: *');
      header("Access-Control-Allow-Headers: X-API-KEY, Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
      header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
      $method = $_SERVER['REQUEST_METHOD'];
      if($method == "OPTIONS") {
          die();
      }
          parent::__construct($config);
          $this-&gt;load-&gt;database();
      }
  
      //Menampilkan data kontak
      function index_get() {
          $id = $this-&gt;get('id');
          if ($id == '') {
              $kontak = $this-&gt;db-&gt;get('telepon')-&gt;result();
          } else {
              $this-&gt;db-&gt;where('id', $id);
              $kontak = $this-&gt;db-&gt;get('telepon')-&gt;result();
          }
          $this-&gt;response($kontak, 200);
      }
  
  
      //Masukan function selanjutnya disini
      function index_post() {
          $data = array(
                      'id'           =&gt; $this-&gt;post('id'),
                      'nama'          =&gt; $this-&gt;post('nama'),
                      'nomor'    =&gt; $this-&gt;post('nomor'));
          $insert = $this-&gt;db-&gt;insert('telepon', $data);
          if ($insert) {
              $this-&gt;response($data, 200);
          } else {
              $this-&gt;response(array('status' =&gt; 'fail', 502));
          }
      }
  
      function index_put() {
          $id = $this-&gt;put('id');
          $data = array(
                      'id'       =&gt; $this-&gt;put('id'),
                      'nama'          =&gt; $this-&gt;put('nama'),
                      'nomor'    =&gt; $this-&gt;put('nomor'));
          $this-&gt;db-&gt;where('id', $id);
          $update = $this-&gt;db-&gt;update('telepon', $data);
          if ($update) {
              $this-&gt;response($data, 200);
          } else {
              $this-&gt;response(array('status' =&gt; 'fail', 502));
          }
      }
  
      function index_delete() {
          $id = $this-&gt;delete('id');
          $this-&gt;db-&gt;where('id', $id);
          $delete = $this-&gt;db-&gt;delete('telepon');
          if ($delete) {
              $this-&gt;response(array('status' =&gt; 'success'), 201);
          } else {
              $this-&gt;response(array('status' =&gt; 'fail', 502));
          }
      }
  
  }
  
  ?&gt;
  </code></pre>
  
  <p>and this is my index.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta name="format-detection" content="telephone=no"&gt;
          &lt;meta name="msapplication-tap-highlight" content="no"&gt;
          &lt;meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width"&gt;
          &lt;link rel="stylesheet" type="text/css" href="css/index.css"&gt;
          &lt;script src="js/jquery.min.js"&gt;&lt;/script&gt;
          &lt;title&gt;Hello World&lt;/title&gt;
      &lt;/head&gt;
      &lt;body&gt;
          &lt;div id="container"&gt;
  
    &lt;span class="input"&gt;
      &lt;input type="text" class="input__field" id="name" /&gt;
      &lt;label for="input-1" class="input__label"&gt;
        &lt;span class="input__label-content"&gt;Nama&lt;/span&gt;
    &lt;/label&gt;
    &lt;/span&gt;
  
    &lt;span class="input"&gt;
      &lt;input type="text" class="input__field" id="nomor" /&gt;
      &lt;label for="input-2" class="input__label"&gt;
        &lt;span class="input__label-content"&gt;Nomor&lt;/span&gt;
      &lt;/label&gt;
    &lt;/span&gt;
    &lt;input type=button id="send-button" type="button" value='Send' /&gt;
  
  &lt;/div&gt;
  
      &lt;/body&gt;
  &lt;/html&gt;
   &lt;script&gt;
    $(document).ready(function()
   {
   $("#send-button").click(function(){
  
  
   var name=$("#name").val();
   var nomor=$("#nomor").val();
   var dataString="id=&amp;amp;name="+name+"&amp;amp;nomor="+nomor;
   $.ajax({
   type: "POST",
   url:"http://localhost:8080/apici/belajar",
   data: dataString,
   crossDomain: false,
   cache: false,
   beforeSend: function(){ $("#send-button").val('Connecting...');},
   success: function(data){
   if(data=="success")
   {
   alert("inserted");
   $("#send-button").val('submit');
   }
   else if(data=="error")
   {
   alert("error");
   }
   }
   });
  
   });
   });
   &lt;/script&gt;
  </code></pre>
  
  <p>I checked the url and it worked in browser.
  thnx for your help :)</p>