EDIT: Он работает на IE! Поэтому мой Chrome и Mozilla должны блокировать вызов POST. FYR: У меня есть разрешение Allow-Control-Allow-Origin, установленное в Chrome.
Я хотел бы подключить AngularJS (я запускаю его в рамках JavaScript - npm, gulp и bower - на MyDocuments) и 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 (index): 1 XMLHttpRequest не может загрузить http://localhost/test/usercontroller/add. Недействительный код состояния HTTP 500
Структура моих папок выглядит следующим образом:
CODEIGNITER - КОНТРОЛЛЕР
XAMPP/HTDOCS/тест/приложение/контроллеры/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/тест/приложение/модель/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;
}
}
ANGULAR - APP
MyDocuments/тест/SRC/app.js
angular.module('app', []);
ANGULAR - INDEX.HTML
MyDocuments/тест/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/тест/SRC/компоненты/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});
};
});
Я делаю что-то неправильно?
Есть ли проблема в том, что у меня есть JavaScript-фреймворк в MyDocuments и CodeIgniter на XAMPP. Я также попытался разместить всю папку JavaScript (с npm, gulp и bower) на XAMPP (не знаю, хорошая ли это идея, но я все равно пробовал), и я получаю такую же ошибку 500, когда запуск этого запроса addUser() POST.
Еще одна вещь, которую я пробовал, заключается в том, что я поставил супер простой angular.html (прикрепленный внизу этого сообщения) непосредственно на xampp/htdocs, и в этом случае вызов POST работает отлично.
Поэтому я думаю, что существует проблема в обмене между JavaScript (угловыми, npm, gupl, bower) и папками CodeIgniter.
Есть ли какие-либо меры для их подключения? Звонки GET работают, поэтому я предполагаю, что также должно быть решение для вызовов POST. Заранее благодарю за любые подсказки.
SUPER SIMPLE ANGULAR.HTML ПРЯМАЯ НА XAMPP/HTDOCS
<!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>
Проблема в том, что вы делаете запрос на отправку CORS, поэтому браузер пытается сделать первые ВАРИАНТЫ вызовами на ваш сервер на том же URL-адресе, что и POST, и если вы не ответили правильно на запрос 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();