在POST表單上的Yeoman，Grunt，AngularJS和錯誤404

Question

我正在嘗試使用AngularJS發送帶有“POST”方法的表單。 我使用$ http發送它，但它總是返回“無法POST”和404錯誤。 路線是正確的，只有當我通過Grunt執行我的應用程序時才會發生（通過“GET”發送完美）。 該應用程序是使用Yeoman構建的。

我認為它必須是一個愚蠢的問題，但我無法使其發揮作用。

風景：

<form name="formLogin" ng-submit="login()">

<ul>
    <li>
        <label for="user">User</label>
        <input type="text" id="user" name="user" ng-model="user">
    </li>
    <li>
        <label for="pass">Password</label>
        <input type="password" id="pass" name="pass" ng-model="pass">
    </li>

</ul>

<input type="submit" value="Send">

控制器：

    'use strict';
angular.module('myApp')
  .controller('LoginCtrl', function ($scope, $http, $resource) {


    $scope.login = function() {

      var config = {
        url: 'php/login.php',
        method: 'POST',
        data: {
            user: $scope.user,
            pass: $scope.pass
        }
      }; // configuration object

      $http(config)
        .success(function(data, status, headers, config) {
            console.log('success');
            if (data.status) {
              // succefull login

            } else {
              // Wrong login
            }
        })
        .error(function(data, status, headers, config) {
            console.log('error');

        });

    };

  });

我用Grunt：

grunt server

為什么會這樣？

謝謝！

Answer 1

我很困惑為什么GET應該在這種情況下工作。 Grunt服務器只提供來自app和.tmp目錄的靜態文件，並且對.php文件的引用是相對的。 因此，對於標准設置，對php/login.php的AJAX請求只會返回位於app/php/login.php中的文件的純PHP源代碼，這當然不是您想要的。

您可能希望將后端與前端分開，並將PHP應用程序放在其他位置。 這可能位於不同的位置（例如/api/login.php ）或不同的主機https://api.example.com/login.php 。 將Yeoman應用程序與API混合使用並不是一個好主意。

但是，如果您被迫將它們保存在一個項目中，則可以使用grunt-php從Gruntfile啟動本地PHP服務器。

Answer 2

Angular默認發送http post請求作為application/json而不是application/x-www-form-urlencoded ，這可能會導致問題。 更改您的應用程序以接受application/json或將application/json $httpProvider.defaults.headers.post為$httpProvider.defaults.headers.post application/x-www-form-urlencoded並$httpProvider.defaults.headers.post序列化。 更多詳細信息，請參閱設置HTTP標頭部分中的Angular.js文檔 。