title: jQuery Ajax - POST from Localhost Generates No 'Access-Control-Allow-Origin' header
body: <p>I thought I understood CORS, but there is something I do not understand apparently. I have an app that I am trying to run from localhost. This app needs to POST a request to Azure Search. I am trying to upload a search document. In an attempt to do this, I have the following:</p>
  
  <pre><code>var url = 'https://my-app.search.windows.net/indexes/test/docs/index?api-version=2015-02-28';
  $.ajax({ 
    url: url,
    type: 'POST',
    contentType:'application/json',
    headers: {
      'api-key':'XXXXXX',
      'Content-Type':'application/json'
    },
    beforeSend: function (req) {
      req.setRequestHeader('Access-Control-Allow-Origin', '*');
    },                    
    data: JSON.stringify({
      '@search.action':'upload',
      'id': '1',
      'name': 'some name'
    }),
    success: function() { alert('success'); },
    error: function() { alert('check the console window.'); }
  });                   
  </code></pre>
  
  <p>Granted, the <code>url</code> and <code>api-key</code> are not the real ones. Still, I can successfully POST this data if I'm using POSTman. Yet, when I try to POST it from my app via jQuery, I get an error in the console window that says:</p>
  
  <pre><code>Failed to load resource: the server responded with a status of 403 (Forbidden)
  
  Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:72' is therefore not allowed access. The response had HTTP status code 403.
  </code></pre>
  
  <p>I have the "Allowed origin type" CORS options for my Azure Search service set to "All". So basically, its wide open. Yet, I still get this CORS error.</p>
  
  <p>How do I POST data to this service from jQuery on localhost?</p>