AngularJS 在第一次运行时给出 404 错误答案

【问题标题】：AngularJS giving 404 error on first runAngularJS 在第一次运行时给出 404 错误
【发布时间】：2014-03-30 07:44:46
【问题描述】：

我编写了一个非常基本的 AngularJS 脚本来解析 JSON 响应。当我运行它时，我得到一个 404 状态（错误），而之后它工作正常。我已经能够在 Google chrome 和 Opera 上复制这种行为，而它在 Firefox 上运行良好。

可能是什么问题？

<body ng-app="myApp" ng-controller="FormCtrl">
    <form name="saveTemplateData" action="#">
        First name:<br/>
        <input type="text" ng-model="form.firstname"><br/><br/>
        <input type="text" ng-model="form.firstname1">
        <input type="submit" id="submit" value="Submit" ng-click="submitForm()" />
    </form>
    <ul>
        <li ng-repeat="friend in friends">
            {{friend.name}}, {{friend.house_no}}
        </li>
    </ul>

    <script src="angular.min.js"></script>  
    <script src = "step4.js"></script>
</body>
</html>

控制器如下：

var app = angular.module('myApp', []);
app.controller('FormCtrl', function ($scope, $http) {
    $scope.formData = {
        firstname: "default",
        firstname1: "default"
    };

    $scope.save = function () {
        formData = $scope.form;
    };

    $scope.submitForm = function () {
        console.log("posting data....");
        $scope.formData = $scope.form;

        $http({
            method: 'GET',
            url: 'http://localhost/testjson.php',
            params: {
                firstname: $scope.formData.firstname,
                firstname1: $scope.formData.firstname1
            }
        }).success(function (data) {
            //var pretty;
            $scope.friends = data.response.docs;
            //angular.toJson(data, [pretty]);
            var str = JSON.stringify(data, undefined, 2);
            //document.write(str);
            alert("success");
        }).error(function (data, status, headers, config) {
            alert(status);
        });
    };
});

PHP 文件只返回一个虚拟 JSON 文件

<?php
    header('Content-Type: application/json');
    header("Access-Control-Allow-Origin: *");

    $state = $_GET['firstname'];
    $state1 = $_GET['firstname1'];

    $arr = '{
        "response": {
            "numFound": 1,
            "start": 0,
            "docs": [
                {
                    "name": "'.$state.'",
                    "house_no": "76"
                }
            ]
        }
    }';

    echo $arr;
?>

编辑：

一些进一步的问题诊断：

问题在于本地和全局 URL（允许跨域访问的工作 URL）
当我在文本框中输入值并提交时，收到 404 错误并刷新页面。但是，如果我再次使用相同的信息重新提交表单，则会显示结果。这可能意味着已获取结果，但在第一次执行 get 请求时会显示 404 错误。由于以上是我拥有的全部代码，因此我无法确定问题出在哪里。
控制台中没有错误。在网络选项卡中，有以下详细信息

方法：获取

状态：已取消

发起者：angular.js:8081

时间：待定

【问题讨论】：

认为是端口错误。看我的回复 - 这是因为你通常不会在 root 中启动 localhost，所以它没有绑定到 80 的标准 HTTP 端口或 443 的 HTTPS

标签： javascript php json angularjs

【解决方案1】：

您是否从文件系统提供 html/js？即文件：///angular-test.html

如果是这样，您可能会遇到跨源问题。请参阅this other question about angular and 404s 以获得可能的答案。

【讨论】：

是的，我在文件系统中使用它，但我在响应头中添加了访问控制允许来源

【解决方案2】：

你在本地运行，对吗？您需要在控制器的 HTTP 调用中向本地主机添加一个端口：

(协议)://localhost:XXXX/

MAMP/LAMP 通常是端口 8888（您的 PHP 堆栈）

干杯和

【讨论】：

它不仅在第一次运行时有效。之后，它与问题中的代码完美配合
粘贴问题中的所有控制台错误和网络选项卡错误可能吗？定义“首次运行” - 整页刷新还是...？我再看看

【解决方案3】：

关于 angularJS 的大多数教程似乎都将操作字段留空，但事实证明根本不需要操作字段。

问题在于线路

<form name="saveTemplateData" action="#">

应该是

<form name="saveTemplateData">

收到来自AngularJS Github issue 的其他帮助。

【讨论】：