title: AngularJS: Cannot send POST request with appropiate CORS headers
body: <p>I'm creating a web app using <strong>AngularJS</strong>. To test it, I'm running the app in a <strong>NodeJS server</strong>, using <a href="https://github.com/angular/angular-seed" rel="noreferrer">angular-seed template</a>. </p>
  
  <p>In this app, I need to <strong>send a JSON message to another host</strong>, via POST request, and get the response, so, I'm using <a href="http://www.html5rocks.com/en/tutorials/cors/" rel="noreferrer"><strong>CORS</strong></a>.</p>
  
  <p>My request is done by implementing a service that uses <a href="https://docs.angularjs.org/api/ng/service/%24http#post" rel="noreferrer"><strong>AngularJS http service</strong></a> (I need the level of abstraction that $http provides. So, I don't use <a href="https://docs.angularjs.org/api/ngResource/service/%24resource" rel="noreferrer">$resource</a>). </p>
  
  <p>Here, my code. Please pay attention to the fact that <strong>I modify $httpProvider to tell AngularJS to send its requests with the appropriate CORS headers</strong>.</p>
  
  <pre><code>angular.module('myapp.services', []).
  
    // Enable AngularJS to send its requests with the appropriate CORS headers
    // globally for the whole app:
    config(['$httpProvider', function($httpProvider) {
            $httpProvider.defaults.useXDomain = true;
  
            /**
             * Just setting useXDomain to true is not enough. AJAX request are also
             * send with the X-Requested-With header, which indicate them as being
             * AJAX. Removing the header is necessary, so the server is not
             * rejecting the incoming request.
             **/
            delete $httpProvider.defaults.headers.common['X-Requested-With'];
        }
    ]).
  
    factory('myService', function($http) {
      return {
        getResponse: function() {
          var exampleCommand = JSON.stringify({"foo": "bar"});
  
          // This really doesn't make a difference
          /*
          var config = {headers: {
              'Access-Control-Allow-Origin':'*',
              'Access-Control-Allow-Headers': 'Content-Type, Content-Length, Accept',
              'Content-Type': 'application/json'
            }
          };
          */
  
          //return $http.post(REMOTE_HOST, exampleCommand, config).
          return $http.post(REMOTE_HOST, exampleCommand).
            success(function(data, status, headers, config) {
                console.log(data);
                return data;
            }).
            error(function (data, status, headers, config) {
              return {'error': status};
            });
        }
      }
    });
  </code></pre>
  
  <p>The problem is I can't make it work. I always get this <strong>error message</strong>: </p>
  
  <blockquote>
    <p>Cross-Origin Request Blocked: The Same Origin Policy disallows reading
    the remote resource at REMOTE_HOST. This can be fixed by moving the
    resource to the same domain or enabling CORS.</p>
  </blockquote>
  
  <p>But if I do a simple jQuery AJAX call like this:</p>
  
  <pre><code>$.ajax(REMOTE_HOST,
  {
      dataType: "json",
      type: "POST",
      data: exampleCommand,
      success: function(data) { console.log(data); },
      error: function(request, textStatus, errorThrown) { console.log("error " + textStatus + ": " + errorThrown);}
   });
  </code></pre>
  
  <p>It works fine.</p>
  
  <p>So, my questions:</p>
  
  <p><strong>- How do I allow cross-site requests in an AngularJS running under NodeJS?</strong></p>
  
  <p><strong>UPDATE</strong>: Thanks to Dayan Moreno Leon's response.</p>
  
  <p>My problem is I need to <a href="http://enable-cors.org/server.html" rel="noreferrer">add cors support to my server</a>. I'm using <a href="https://github.com/nodeapps/http-server/issues/43" rel="noreferrer"><strong>NodeJS http-server</strong></a> for development and <strong>lighttpd</strong> for production. </p>
  
  <p><strong>- Why does the simple jQuery POST request work but AngularJS POST request doesn't?</strong></p>
  
  <p>I guess jQuery AJAX requests are <a href="http://api.jquery.com/jQuery.ajax/" rel="noreferrer">cross-domain</a> by default. Not really sure yet.</p>
  
  <p>Many thanks in advance</p>