title: AngularJS $resource makes HTTP OPTIONS request instead of HTTP POST for $save method
body: <p>I'm in the process of writing a simple library application to get ready for a larger project with AngularJS. After reading a lot online about using <code>$resource</code> to interact with a RESTful API, I decided that it would probably offer some time-saving and scaling benefits to implement it instead of using <code>$http</code> for each request. The problem is that for some reason (I'm no expert on CORS and the request is being sent cross-domain) when using the <code>$save</code> method my Node.js console shows:</p>
  
  <pre><code>OPTIONS /books 200 1ms - 161b 
  </code></pre>
  
  <p>Using the <code>query()</code> method works fine - the Node console shows:</p>
  
  <pre><code>GET /books 200 1ms - 228b
  </code></pre>
  
  <p>I've been stuck for several hours at this point, trying variations on the below but it always ends up being an OPTIONS request instead of POST (which is what it should be according to the Angular documentation) for the <code>$save</code> method.</p>
  
  <h1>AngularJS Web App</h1>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var libraryApp = angular.module('libraryApp', ['ngResource', 'ngRoute', 'libraryControllers']);
  
  libraryApp.factory('$book', ['$resource', function ($resource) {
  
      return $resource('http://mywebserver\\:1337/books/:bookId', { bookId: '@bookId' });
  }]);
  </code></pre>
  
  <p><strong>controllers.js</strong></p>
  
  <pre><code>var libraryControllers = angular.module('libraryControllers', []);
  
  libraryControllers.controller('BookCtrl', ['$scope', '$book', function($scope, $book) {
  
      ...
  
      $scope.addBook = function () {
          var b = new $book;
          b.isbn = "TEST";
          b.description = "TEST";
          b.price = 9.99;
          b.$save();
      };
  }]);
  </code></pre>
  
  <h1>Node.js with Express REST API</h1>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var express = require('express'),
      books = require('./routes/books'),
      http = require('http'),
      path = require('path');
  
  var app = express();
  
  ...
  
  // enable cross-domain scripting
  app.all('*', function(req, res, next) {
      res.header("Access-Control-Allow-Origin", req.headers.origin);
      res.header("Access-Control-Allow-Headers", "X-Requested-With");
      next();
  });
  
  // routing
  app.get('/books', books.getAll);
  app.get('/books/:isbn', books.get);
  // This is what I want to fire with the $save method
  app.post('/books', books.add);
  
  http.createServer(app).listen(app.get('port'), function(){
      console.log('Express server listening on port ' + app.get('port'));
  });
  </code></pre>
  
  <p><strong>./routes/books.js</strong></p>
  
  <pre><code>...
  
  exports.add = function(req, res) {
  
      console.log("POST request received...");
      console.log(req.body.isbn);
  };
  </code></pre>
  
  <p>Tried putting this line in my config function <code>delete $httpProvider.defaults.headers.common["X-Requested-With"];</code> but no change.</p>
  
  <p>I'm no Angular/Node pro but right now I'm thinking that it's something to do with it being cross domain and, like I said, I'm no expert on CORS.</p>
  
  <p>Thanks in advance.</p>