我正在编写一个简单的库应用程序,为了准备使用AngularJS进行更大的项目。在网上阅读了很多关于使用$resource
与RESTful API交互的内容后,我决定实现它可能会节省一些时间,并具有可扩展性,而不是为每个请求使用$http
。问题是由于某种原因(我不是CORS的专家,请求正在跨域发送),当使用$save
方法时,我的Node.js控制台显示:
OPTIONS /books 200 1ms - 161b
使用query()
方法效果良好 - Node控制台显示:
GET /books 200 1ms - 228b
我已经卡了好几个小时了,尝试着变化下面的内容,但它总是以OPTIONS请求结束而不是POST请求(根据Angular文档应该是后者)$save
方法。
AngularJS Web应用程序
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();
};
}]);
使用Express构建的Node.js 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);
};
我尝试将这行代码放入我的config函数中delete $httpProvider.defaults.headers.common ["X-Requested-With"];
,但没有改变。
我不是Angular/Node专业人士,但现在我认为这与它跨域有关,就像我说的,我不是CORS方面的专家。
提前致谢。