带有角度的HTTP Post失败答案

【问题标题】：HTTP Post failure with angular带有角度的HTTP Post失败
【发布时间】：2016-04-29 19:47:15
【问题描述】：

我是 angular.js 的新手，无法让简单的 POST 请求正常工作。我正在使用角度版本 1.4.8。我的请求永远不会到达服务器。相反，它会在发出请求之前出现客户端错误。我看不出我做错了什么，即使我已经阅读了这里的文档：https://docs.angularjs.org/api/ng/service/$http#post。这是我拥有的相关错误信息（使用下面的代码示例生成）：

{ “数据”：空， “状态”：-1， “配置”：{ “方法”：“发布”， “转换请求”：[ 空值 ], “转换响应”：[ 空值 ], "url": "http://localhost:4567/foo", “数据”： { “富”：“酒吧” }, “标题”：{ "Accept": "application/json, text/plain, /", “内容类型”：“应用程序/json；charset=utf-8” } }, “状态文本”：“” }

这是我的代码示例。它在 Firefox 和 chrome 中都重现了该问题，因此这似乎不是浏览器的怪癖。由于我是一个角度新手，这可能是基本的（但对我来说并不明显）。帮助表示赞赏;)

<!DOCTYPE HTML>
<html lang="en-US">

<head>
    <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>

<body>
<script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function ($scope, $http) {

        $scope.httpPost = function (postBody) {
            var successCallback = function (data, status, headers, config) {
                alert("post success");
            };

            var errorCallback = function (data, status, headers, config) {
                var responseJson = angular.toJson(data);
                $scope.theError = responseJson;
            };

            $http.post('http://localhost:4567/foo', postBody).then(successCallback, errorCallback);

        };

        var postBody = {"foo" : "bar"};
        $scope.httpPost(postBody);
    });
</script>

<div data-ng-app="myApp" data-ng-controller="customersCtrl">
    <pre>{{theError}}</pre>
</div>

</body>
</html>

【问题讨论】：

您能否提供有关客户端错误的更多信息？你在这两个回调中得到了什么吗？
我将错误转换为 json。它列在问题的第二段中。
我的意思是，你打印了 $scope.theError 吗？（只是确保因为它看起来像你这样做）或者错误来自哪里？确保它是客户端错误，因为您发布的 JSON 看起来请求很好/您的代码看起来不错
错误是用这一行打印出来的：
```
{{theError}}
```

标签： angularjs post

【解决方案1】：

虽然我不知道你的问题的答案，但我可以建议什么对我有用吗？我也是 Angular 初学者。另外，查看John Papa's Angular guide 以获得更好的代码。

前端

angular
    .module('app')
    .config(config);

function config($routeProvider) {
    $routeProvider.when('/add-job', {
        templateUrl: 'templates/add-job.view.html',
        controller: AddController,
        controllerAs: 'addCtrl'
    });
};

function AddController($http) {
    var that = this;

    that.add_new = function (job) {
        $http.post('api/add_job', that.job).success(function () {
            //alert("added!");
        });
    };
}

后端 - Slim 框架

require 'vendor/autoload.php';

$app = new \Slim\App; 

$app->post('/add_job', 'addJob');

function addJob($request) {
    $job = json_decode($request->getBody());
    $sql = "INSERT INTO jobs (title, company, location) VALUES (:title, :company, :location)";
    try {
        $db = getConnection();
        $stmt = $db->prepare($sql);  
        $stmt->bindParam("title", $job->title);
        $stmt->bindParam("company", $job->company);
        $stmt->bindParam("location", $job->location);
        $stmt->execute();
        $job->id = $db->lastInsertId();
        $db = null;
        echo json_encode($job); 
    } catch(PDOException $e) {
    echo '{"error":{"text":'. $e->getMessage() .'}}'; 
    }
}

查看

<form novalidate name="AddNewForm" method="post" action="">

    <input type="text" ng-model="addCtrl.job.title" placeholder="Title" /><br/>
    <input type="text" ng-model="addCtrl.job.company" placeholder="Company" /><br/>
    <input type="text" ng-model="addCtrl.job.location" placeholder="Location" /><br/>

    <button ng-click="addCtrl.add_new(job)">Save!</button>

</form>

【讨论】：

您好，Ivan，感谢您的快速回复。我很难理解前端代码。您能否像我的问题一样将其放入 html 文档的上下文中。您的答案可能有效；我足够新，我不知道如何将它连接到一个工作示例中；）
@user1483903 我添加了 HTML 视图。看一看。这是ng-click="addCtrl.add_new(job)" 调用$http.post('api/add_job', that.job) 的主要内容。
@user1483903 按 F12 使用 Chrome 调试器也有帮助。转到网络选项卡并刷新页面。然后点击 XHR 中的文件，查看您的请求获得了什么状态。
您使用 chrome 调试器的建议为我指明了正确的方向。这是一个 CORS 问题。我以平面文件的形式访问了这个网页，即：file:///my-angular-post.html。它与之对话的 Web 服务在 Web 容器中运行。当我将静态 html 文件添加到 Web 服务器时，我的原始代码有效。谢谢！
如果浏览器和/或 Angular 能够首先给出 CORS 错误消息，那就太好了！