title: HTTP request from Angular sent as OPTIONS instead of POST
body: <p>I'm trying to send some HTTP requests from my angular.js application to my server, but I need to solve some CORS errors.</p>
  
  <p>The HTTP request is made using the following code:</p>
  
  <pre><code>functions.test = function(foo, bar) {
      return $http({
          method: 'POST',
          url: api_endpoint + 'test',
          headers: {
              'foo': 'value',
              'content-type': 'application/json'
          },
          data: {
              bar:'value'
          }
      });
  };
  </code></pre>
  
  <p>The first try ended up with some CORS errors. So I've added the following lines to my PHP script:</p>
  
  <pre><code>header('Access-Control-Allow-Origin: *');
  header('Access-Control-Allow-Methods: POST, GET, OPTIONS, DELETE, PUT');
  header('Access-Control-Allow-Headers: X-Requested-With, Content-Type, Origin, Authorization, Accept, Client-Security-Token, Accept-Encoding, X-Auth-Token, content-type');
  </code></pre>
  
  <p>The first error is now eliminated.</p>
  
  <p>Now the Chrome's developer console shows me the following errors:</p>
  
  <blockquote>
    <p>angular.js:12011 OPTIONS <a href="http://localhost:8000/test" rel="noreferrer">http://localhost:8000/test</a> (anonymous
    function)</p>
    
    <p>423ef03a:1 XMLHttpRequest cannot load
    <a href="http://localhost:8000/test" rel="noreferrer">http://localhost:8000/test</a>. Response for preflight has invalid HTTP
    status code 400</p>
  </blockquote>
  
  <p>and the network request looks like I expected (HTTP status <code>400</code> is also expected):</p>
  
  <p><a href="https://i.stack.imgur.com/FmAW9.png" rel="noreferrer"><img src="https://i.stack.imgur.com/FmAW9.png" alt="network request"></a></p>
  
  <p>I can't imagine how to solve the thing (and how to understand) why the request will send on localhost as <code>OPTIONS</code> and to remote servers as <code>POST</code>. Is there a solution how to fix this strange issue?</p>