连接 AngularJS 和 CodeIgniter（GET 调用有效但 POST 无效）答案

【问题标题】：Connecting AngularJS and CodeIgniter (GET calls working but POST not)连接 AngularJS 和 CodeIgniter（GET 调用有效但 POST 无效）
【发布时间】：2015-09-14 05:34:23
【问题描述】：

编辑：它适用于 IE ！！！所以我的 Chrome 和 Mozilla 必须阻止 POST 调用。 FYR：我在 Chrome 上安装了 Allow-Control-Allow-Origin。

我想连接 AngularJS（我在 MyDocuments 上的 JavaScript 框架 - npm、gulp 和 bower 中运行它）和 CodeIgniter（在 XAMPP 上）。

GET 调用工作正常（我通过 AngularJS 在我的屏幕上获取用户名和他们的城市）。

但是我在运行这个 POST 函数时遇到了问题（它将新用户添加到数据库中）：

$scope.addUser = function(name,city) {
    $http.post("http://localhost/test/index.php/usercontroller/addUser",{'name':name,'city':city})
        .success(function(response) {$scope.answer=response})
        .error(function(response) {alert('error');$scope.answer = response});
};

当我调用它时，控制台中出现错误：

选项http://localhost/test/usercontroller/add 500（内部服务器错误）（匿名函数）@ angular.js:10413sendReq @ angular.js:10232$get.serverRequest @ angular.js:9944processQueue @ angular.js:14454（匿名函数）@ angular.js:14470$get.Scope.$eval @ angular.js:15719$get.Scope.$digest @ angular.js:15530$get.Scope.$apply @ angular.js:15824(匿名函数）@angular.js:23095eventHandler@angular.js:3247（索引）：1 XMLHttpRequest 无法加载 http://localhost/test/usercontroller/add。 HTTP 状态码无效 500

我的文件夹结构如下：

CODEIGNITER - 控制器

xampp/htdocs/test/application/controllers/usercontroller.php

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Usercontroller extends CI_Controller {

    public function __construct()
    {
        parent::__construct();
        $this->load->model('usermodel');
        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept");
        header('Content-type: application/json');
        header('Access-Control-Allow-Methods', 'GET, POST, OPTIONS');
    }

    public function index()
    {
        $data['include'] = 'user/index';
        $this->load->view('user/index', $data);
    }

    public function addUser()
    {
        $postdata = file_get_contents("php://input");
        $request = json_decode($postdata);
        $name = $request->name;
        $city = $request->city;
        $id = $this->usermodel->addUser($name,$city);
        if($id)
        {
            echo '{"status" : "success"}';
        }
        else
        {
            echo '{"status" : "failure"}';
        }
    }

    public function getCities()
    {
        $cities = $this->usermodel->getCities();
        echo json_encode($cities);
    }

    public function getUsers()
    {
        $users = $this->usermodel->getUsers();
        echo json_encode($users);
    }

}

CODEIGNITER - 型号

xampp/htdocs/test/application/models/usermodel.php

<?php if (!defined('BASEPATH')) exit('No direct script allowed');

class Usermodel extends CI_Model {

    public function __construct()
    {
       parent::__construct();
    }

    public function addUser($name,$city)
    {
        $data = array('name' =>$name,'city' => $city);
        $this->db->insert('user',$data);
        $insert_id = $this->db->insert_id();
        return $insert_id;
    }

    public function getCities()
    {
        $sql='SELECT city FROM user';
        $query = $this->db->query($sql);
        $city = array();
        foreach($query->result() as $row)
        {
            $city[]=array("city" => $row->city);
        }
        return $city;
    }

    public function getUsers()
    {
        $sql='SELECT * FROM user';
        $query = $this->db->query($sql);
        $user = array();
        foreach($query->result() as $row)
        {
            $user[]=array(
                "name" => $row->name, 
                "city" => $row->city
            );
        }
        return $user;
    }

}

角度 - 应用程序

MyDocuments/test/src/app.js

angular.module('app', []);

角度 - INDEX.HTML

MyDocuments/test/src/index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">

    <title>Test project</title>

    <link rel="stylesheet" href="../bower_components/bootstrap/dist/css/bootstrap.min.css">

    <script src="../bower_components/angular/angular.js"></script>

    <script src="js/all.js"></script>

</head>

<body ng-app="app">
    <div ng-controller="MainController">


        <form novalidate>
            <label>Name:</label>
            <input type="text" ng-model="name"/>
            <div>{{name}}</div>
            <label>City:</label>
            <input type="text" ng-model="city"/>
            <div>{{city}}</div>
            <button ng-click="addUser(name,city)">Submit</button> 
            <div>Answer:{{answer}}</div>
        </form>

        <h3>Users</h3>
        <ul>
            <li ng-repeat="user in users track by $index">{{ user.name }}, {{user.city}}</li>
        </ul>

    </div>
</body>
</html>

角度 - 控制器

MyDocuments/test/src/components/MainController.js

angular.module('app').controller('MainController', function($scope, $http) {

    $http.get("http://localhost/test/index.php/usercontroller/getUsers")
        .success(function(response) {$scope.users = response});

    $http.get("http://localhost/test/index.php/usercontroller/getCities")
        .success(function(response) {$scope.cities = response});

    $scope.addUser = function(name,city) {
        $http.post("http://localhost/test/index.php/usercontroller/addUser",{'name':name,'city':city})
        .success(function(response) {$scope.answer=response})
        .error(function(response) {alert('error');$scope.answer = response});
    };

});

我做错了吗？

我在 MyDocuments 上有一个 JavaScript 框架，在 XAMPP 上有 CodeIgniter 是否存在问题。我还尝试将整个 JavaScript 文件夹（带有 npm、gulp 和 bower）放在 XAMPP 上（不知道这是否是个好主意，但无论如何我都试过了），当我得到相同的 500 错误时运行 addUser() POST 调用。

我尝试过的另一件事是，我直接在 xampp/htdocs 上放置了一个超级简单的 angular.html（附在这篇文章的底部），在这种情况下，POST 调用可以完美运行。

所以我猜想 JavaScript（angular、npm、gupl、bower）和 CodeIgniter 文件夹之间的通信存在问题。

任何想法可以做些什么来连接它们？ GET 调用正在工作，所以我想也应该有针对 POST 调用的解决方案。提前感谢您的任何提示。

直接在 XAMPP/HTDOCS 上的超简单 ANGULAR.HTML

<!doctype html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
  </head>

<body>
    <div ng-app="app" ng-controller="MainController">

        <form novalidate>
            <label>Name:</label>
            <input type="text" ng-model="name"/>
            <div>{{name}}</div>
            <label>City:</label>
            <input type="text" ng-model="city"/>
            <div>{{city}}</div>
            <button ng-click="addUser(name,city)">Submit</button> 
            <div>Answer:{{answer}}</div>
        </form>

        <h3>Users</h3>
        <ul>
            <li ng-repeat="user in users track by $index">{{ user.name }}, {{user.city}}</li>
        </ul>
    </div>

<script>

    var app = angular.module('app', []);

    app.controller('MainController', function($scope, $http) {
            console.log('delam');
            $http.get("http://localhost/ekohrana/index.php/usercontroller/getUsers")
        .success(function(response) {$scope.users = response});

        $scope.addUser = function(name,city) {
         $http.post("http://localhost/ekohrana/index.php/usercontroller/addUser",{name:name,city:city})
         .success(function(response) {$scope.answer=response})
         .error(function(response) {alert('error');$scope.answer = response});
         };

    });

</script>

</body>
</html>

【问题讨论】：

标签： angularjs codeigniter post

【解决方案1】：

问题是您正在发出 CORS 发布请求，因此浏览器尝试在与 POST 相同的 url 上对您的后端进行第一次 OPTIONS 调用，当您对 OPTIONS 请求没有正确响应时，您的前端将失败。

   function __construct() {

        header('Access-Control-Allow-Origin: *');
        header("Access-Control-Allow-Headers: Origin, X-Requested-With, Content-Type, Accept, Access-Control-Request-Method");
        header("Access-Control-Allow-Methods: GET, POST, OPTIONS, PUT, DELETE");
        $method = $_SERVER['REQUEST_METHOD'];
        if($method == "OPTIONS") {
            die();
        }
        parent::__construct();

【讨论】：