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发布请求发送为application/json，而不是application/x-www-form-urlencoded，这可能会导致问题。将您的申请更改为接受application/json或将application/json替换为application/x-www-form-urlencoded中的$httpProvider.defaults.headers.post并自行序列化。设置HTTP标头部分中的More details in Angular.js doc。

在POST表单上的Yeoman，Grunt，AngularJS和错误404

2 个答案: