POST,PUT,DELETE请求从AngularJS $ http / AJAX到基于Node.js + Express.js的API

时间:2017-12-01 17:25:11

标签: angularjs node.js ajax express

我在Node.js和Express.js v4上写了后端API,这部分(index.js):

app.use(function (req, res, next) {
    res.setHeader('Access-Control-Allow-Origin', 'http://example.com');
    res.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    res.setHeader("Access-Control-Allow-Headers", "Origin, X-Requested-With, Content-Type, Accept");
    res.setHeader('Access-Control-Allow-Credentials', true);
    next();
});

app.post('/add1', function (req, res) {
    db.one("INSERT INTO table(value1) VALUES (${value1}) RETURNING ID", req.query).then(function (data) {
        res.json(data);
    }).catch(function (error) {
        res.json(error);
    });
});

app.put('/add2', function (req, res) {
    db.one("INSERT INTO table(value1) VALUES (${value1}) RETURNING ID", req.query).then(function (data) {
        res.json(data);
    }).catch(function (error) {
        res.json(error);
    });
});

app.get('/add3', function (req, res) {
    db.one("INSERT INTO table(value1) VALUES (${value1}) RETURNING ID", req.query).then(function (data) {
        res.json(data);
    }).catch(function (error) {
        res.json(error);
    });
});

我有Angular JS或像这样的样本ajax

app.controller('globalController', function($scope, $http) {
    var jsd = {};
    jsd.value1=1;
    $http.put(API_URL + 'add2', jsd).then(function(data) {
        console.log(data);
    }, function(data) {
        console.log(data);
    });
});

$.ajax({
            url: API_URL + 'add1',
            method: 'POST',
            dataType: 'json',
            data: jsond,
            success: function(data) {
                console.log(data);
            },
            error: function(data) {
                console.log(data);
            }
        });

但我不会将任何数据记录到req.queryreq对象中。当我用get获取add3的AJAX请求时,所有工作,req.query都有我的参数。

我读到了这个解决方案:

app.config(function ($httpProvider) {
        $httpProvider.defaults.transformRequest = function(data){
            if (data === undefined) {
                return data;
            }
            return $.param(data);
        };
        $httpProvider.defaults.headers.put['Content-Type'] = 'application/x-www-form-urlencoded; charset=UTF-8';
    });

和解决方案here

var multer = require("multer");

//...

var upload = multer({ dest: "./upload/" });
app.post("/post", upload.array(), function(req, res) {
    console.log(req.body);
    res.send(null);
}

我首先尝试过,而不是工作,第二个是太奇怪的解决方案(我无法将数据保存到文件等)我认为问题出现在拳头OPTION请求中,但我用Google搜索,找不到解决方案。我需要一些示例(工作代码)如何从Angular $ http或AJAX发送POST或PUT数据,并在node.js中的req对象中使用此数据。在GET请求中,所有这些都有效,但我如何才能使其在其他人身上发挥作用?

1 个答案:

答案 0 :(得分:0)

您使用的是哪个版本的Express?您可能正在编写旧方法并使用新版本。

你可能想看看这个 - How to retrieve POST query parameters?

无论如何,我建议您使用ngResource在Angular中进行REST HTTP调用。

  1. 实例化工厂 这会暴露一些方法,例如querysave等。
  2. angular
      .module('MyModule')
      .factory('AddEndpoint', AddEndpoint);
    
    AddEndpoint.$inject = ['$resource'];
    
    function AddEndpoint($resource) {
      return $resource(API_URL + '/:param', { param: '@param' });
    }

    1. 享受工厂
    2. angular
        .module('MyModule')
        .controller('MyController', MyCtrl)
       
      MyCtrl.$inject = ['AddEndpoint'];
      
      function MyCtrl(AddEndpoint) {
        var scope = this;
        scope.getFromApi = AddEndpoint.get({ params: 'add1' }); // GET 'API_URL/add1'
        scope.postToApi = postToApi;
      
        function postToApi(data) {
          data.params: 'add2'
          AddEndpoint.save(data); // POST to 'API_URL/add2'
        }
      }