Angular到服務器的POST（使用Node Express編寫）無法識別參數

Question

我是Node Express的新手，如果您問的是愚蠢的問題，對不起。 我正在設計一個包含兩部分的應用程序：1-服務器端2-客戶端。 這兩個部分是完全獨立的。 我在localhost：3000上運行服務器端，在localhost：9000上運行客戶端。 我試圖通過客戶端應用程序發布到服務器端，但是我從服務器獲得的響應表明它無法識別我的POST參數。 這是我期望的答復：

{
  "make": "Toyota",
  "model": "Corolla",
  "year": "2013"
}

這是我目前收到的答復：

{
  "{\"make\":\"Toyota\",\"model\":\"Corolla\",\"year\":\"2013\"}": ""
}

當我通過服務器用戶界面發布時，它可以正確響應，但是當我嘗試通過客戶端應用發布時，它無法識別參數。

這是我編寫的代碼：

1-服務器端代碼

app.js：

'use strict';

/*
 * Express Dependencies
 */
var express = require('express');
var app = express();
var port = 3000;

/*
 * Use Handlebars for templating
 */
var exphbs = require('express3-handlebars');
var hbs;

// For gzip compression
app.use(express.compress());
//Middleware to parse the request body
app.use(express.urlencoded());

/*
 * Config for Production and Development
 */
if (process.env.NODE_ENV === 'production') {
    // Set the default layout and locate layouts and partials
    app.engine('handlebars', exphbs({
        defaultLayout: 'main',
        layoutsDir: 'dist/views/layouts/',
        partialsDir: 'dist/views/partials/'
    }));

    // Locate the views
    app.set('views', __dirname + '/dist/views');

    // Locate the assets
    app.use(express.static(__dirname + '/dist/assets'));

} else {
    app.engine('handlebars', exphbs({
        // Default Layout and locate layouts and partials
        defaultLayout: 'main',
        layoutsDir: 'views/layouts/',
        partialsDir: 'views/partials/'
    }));

    // Locate the views
    app.set('views', __dirname + '/views');

    // Locate the assets
    app.use(express.static(__dirname + '/assets'));
}

// Set Handlebars
app.set('view engine', 'handlebars');



/*
 * Routes
 */
// Index Page
app.get('/', function(request, response, next) {
response.setHeader('Access-Control-Allow-Origin', '*');
response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
response.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
response.setHeader('Access-Control-Allow-Credentials', 'true');
    response.render('index');
});


app.post('/command', function(request, response) {
    response.setHeader('Content-type', 'application/json; charset=utf-8');
    response.setHeader('Access-Control-Allow-Origin', '*');
    response.setHeader('Access-Control-Allow-Methods', 'GET, POST, OPTIONS, PUT, PATCH, DELETE');
    response.setHeader('Access-Control-Allow-Headers', 'X-Requested-With,content-type');
    response.setHeader('Access-Control-Allow-Credentials', 'true');

        console.log(request.body.make);
        console.log(request.body.model);
        console.log(request.body.year);

        response.send(request.body);
    // ...
});

/*
 * Start it up
 */
app.listen(process.env.PORT || port);
console.log('Express started on port ' + port);

索引手把

<div class="container">

    <form action="command" method="post">

    <label>Make</label>
    <input type="text" name="make" id = "make" value="" />
    <br />
    <label>Model</label>
    <input type="text" name="model" id = "model" value="" />
    <br />
    <label>Year</label>
    <input type="text" name="year"  id = "year" value="" />
    <br />
    <input type="submit" value="Submit" />

    </form>

</div>

2-客戶端
service.js

myAppServices.factory('postServices', function($http, $q, $rootScope){
    var dataArray = [];
    var sendPost = function(selectedMake, selectedModel, selectedYear){

    var defer = $q.defer();

    $http({
            method:'POST',
        url: 'http://localhost:3000/command',
        data: {
          make:selectedMake, 
          model:selectedModel, 
          year:selectedYear
        },

        headers : {
                   'Content-Type' : 'application/x-www-form-urlencoded; charset=utf-8'
             }
            }).success(function (data, status, headers, config) {
              defer.resolve(data);
              // $rootScope.$broadcast('UPDATE_RESULT_TABLE', data);
              dataArray.push(data);

            }).error(function (data, status, headers, config) {
                alert("Fail");
                defer.reject({});
            });

    return defer.promise;
}

return {
    dataArray: dataArray,
    sendPost: sendPost
    }
});

controller.js

myAppControllers.controller('postCriteria', function($scope, $http, postServices, $location) {
    //We define the following line to get the values from child and put it to parent
    $scope.carData = {car:'', Model:'', Year:''};

    $scope.searchCar = function  () {
      postServices.sendPost($scope.carData.car, $scope.carData.Model, $scope.carData.Year).then(function(data){
                        $location.path('/results');
                });
        }         
    });

Answer 1

看來您的回應是正確的，只是序列化的版本，被強制為鍵/值對，但效果不佳。 HTTP不支持在請求正文中發送非序列化數據。 如果您將服務器代碼中的最后一行修改為：

response.send(JSON.parse(request.body));

我認為您應該得到想要的答復。

Answer 2

我認為您必須使用express json.response函數

像這樣：

res.json(200, JSON.parse(request.body));

Answer 3

問題是AngularJS將POST數據作為JSON數據發送：

我可以看到兩種解決方案：

• 在$http方法中使用params代替data 。 在這種情況下，您的對象將作為GET參數而不是請求正文通過URL發送，因此您將必須編寫response.send(request.query); 而不是response.send(request.body); 在服務器上
• 您可以通過傳遞字符串而不是對象來執行POST數據。 使用jQuery，可以像編寫代碼一樣簡單：

$http({
    ...
    data: $.param({make:'Toyota',model:'Corolla',year:'2013'})
    ...
});

如果您不介意使用jQuery，那么對我來說第二個變體更可取:)