title: Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at http://localhost:9200/test12/test3/_search?pretty
body: <p>I have an autocomplete jquery function with ElasticSearch. I'm getting the following error when typing the first letter in.</p>
  
  <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at <a href="http://localhost:9200/test12/test3/_search?pretty" rel="nofollow noreferrer">http://localhost:9200/test12/test3/_search?pretty</a>. (Reason: CORS header ‘Access-Control-Allow-Origin’ missing).</p>
  
  <p>Here is the code</p>
  
  <pre><code>$(function () {
      $("#keyword").autocomplete({
          source: function (request, response) {
              $.ajax({
                   url: "http://localhost:9200/test12/test3/_search?pretty",
                  data: "q=firstname:" + request.term +"*" , 
                  dataType: "json", 
                  type: "POST", 
                  headers: {
                  'Access-Control-Allow-Origin':  'http://localhost'
              },
                  crossDomain: true,    
                  jsonpCallback:"callback", 
                  contentType: "application/json; charset=utf-8",
                  success: function (data) {
                      console.log(data); 
                      response($.map(data.d, function (item) {
                          return {
  
  
                              label: item.split('-')[0],
                              val: item.split('-')[1]
                          }
                      }))
                  },
                  error: function (response) {
                      alert('error'+ response.responseText);
                  },
                  failure: function (response) {
                      alert('failure'+response.responseText);
                  }
              });
          },
          select: function (e, i) {
              $("[id$=keyword]").val(i.item.val);
          },
          minLength: 1
      });
  });
  </code></pre>
  
  <p></p>
  
  <p>I also tried <code>'Access-Control-Allow-Origin':  '*'</code> it didn't work.</p>
  
  <p>When I try <code>jsonp</code> instead of <code>json</code>, I get </p>
  
  <blockquote>
    <p>syntax error (which is normal, since my code expects json not jsonp stuff)</p>
  </blockquote>
  
  <p>on the SERVER: I did,</p>
  
  <pre><code>Header always set Access-Control-Allow-Origin "*"
  Header always set Access-Control-Allow-Methods "POST, GET, OPTIONS, DELETE, PUT"
  Header always set Access-Control-Max-Age "1000"
  Header set Access-Control-Allow-Headers "x-requested-with, Content-Type, origin$
  /etc/apache2/apache2.conf
  </code></pre>
  
  <p>STILL did not solve the problem</p>