As I work on developing a basic library application in preparation for a larger AngularJS project, I have been exploring the benefits of using $resource over $http to interact with a RESTful API. While implementing $resource seemed promising for saving time and scaling the application, I encountered an issue when trying to use the $save method which resulted in a CORS-related error:
OPTIONS /books 200 1ms - 161b
Interestingly, the query() method worked without any problems as seen from the Node console output:
GET /books 200 1ms - 228b
Despite spending hours troubleshooting, including adjusting configurations as shown below, I could not get the $save method to trigger a POST request as expected.
AngularJS Web App
app.js
var libraryApp = angular.module('libraryApp', ['ngResource', 'ngRoute', 'libraryControllers']);
libraryApp.factory('$book', ['$resource', function ($resource) {
return $resource('http://mywebserver\\:1337/books/:bookId', { bookId: '@bookId' });
}]);
controllers.js
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();
};
}]);
Node.js with Express REST API
app.js
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'));
});
./routes/books.js
...
exports.add = function(req, res) {
console.log("POST request received...");
console.log(req.body.isbn);
};
I attempted removing the line
delete $httpProvider.defaults.headers.common["X-Requested-With"];While I am not an expert in Angular or Node, I suspect that the problem lies with the cross-domain request and CORS, which has been challenging to address.
Any insights or assistance would be greatly appreciated. Thank you.