我无法使用AngularJS中的$ http.post发送新数据

Question

I have theses codes: 我有这些代码：

app.js (routers): app.js（路由器）：

(function(){    
    var pizzasApp = angular.module('pizzasApp',['ngRoute','app']);

    //here is declared the routers
    pizzasApp.config(['$routeProvider', function($routeProvider){

        $routeProvider.
        when('/pizzas',{
            templateUrl: 'pizza-list.html',
            controller: 'PizzasController'
        }).
        when('/',{
            redirectTo:'/pizzas'
        }).
        when('/pizzas/:pizzaId',{
            templateUrl: 'pizza-detail.html',
            controller: 'PizzasDetailController'
        }).
        otherwise({
            redirecTo: '/pizzas'
        });
    }]);

})();

configure.js (controllers): configure.js（控制器）：

(function(){

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

    //In this controller is got all pizzas from JSON file and post new pizzas  
    app.controller('PizzasController',['$scope','$http',function($scope,$http){
        $http.get('http://162.250.78.47/api/pizzas').success(function(data){
            $scope.pizzas = data;
        });

    //WHEN CLICK THE BUTTON FORM FROM pizza-list.html THIS ADD NEW PIZZA. BUT THIS DOESN'T WORK
        $scope.save = function(){
            $http.post('http://162.250.78.47/api/pizzas',$scope.pizzas).then(function(data){
                $location.path('/pizzas');
            });
        };
    }]);

    //In this controller I get a selected pizza with ingredients
    app.controller('PizzasDetailController',['$scope','$http','$routeParams',function($scope,$http,$routeParams){
        $scope.pizzaId = $routeParams.pizzaId;

        $http.get('http://162.250.78.47/api/pizzas/'+$scope.pizzaId).success(function(data){
            $scope.pizza = data;
        });
        $http.get('http://162.250.78.47/api/ingredients').success(function(ingr){
            $scope.ingrs = ingr;
        });
    }])

})();

index.html (home): index.html（首页）：

<!DOCTYPE html>
<html lang="en" ng-app="pizzasApp">
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="bootstrap-3.2.0/css/bootstrap-theme.min.css">
        <script type="text/javascript" src="jquery-2.1.1.min.js"></script>
        <script type="text/javascript" src="bootstrap-3.2.0/js/bootstrap.min.js"></script>
        <script type="text/javascript" src="angular.min.js"></script>
        <script type="text/javascript" src="angular-route.min.js"></script>
        <script type="text/javascript" src="app.js"></script>
        <script type="text/javascript" src="configure.js"></script>
        <title>New Web Project</title>
    </head>
    <body>
        <div ng-view></div>
    </body>
</html>

pizza-list.html (pizza list and form to add new pizza): pizza-list.html（比萨饼列表和添加新比萨饼的表单）：

<div ng-repeat="nombre in pizzas">
    <p><a href="#/pizzas/{{nombre._id}}">{{nombre.name}}</a></p>

</div>

<!-- HERE IS THE PROBLEM -->
<form>
    <label>Write the pizza name that you want add:</label></br>
    <input type="text" ng-model="pizzas.name" placeholder="Pizza">
    <button ng-click="save()">Add</button>
</form>

pizza-detail.html (pizza with ingredients): pizza-detail.html（含比萨饼）：

<div>
    <p>{{pizza.name}}</p>   
        <div ng-repeat="ing in pizza.ingredients track by $index">
            <div ng-repeat="ingr in ingrs">
                <div ng-if="ing == ingr._id">
                    {{ingr.name}}
                </div>
            </div>
        </div>
</div>

My problem is that when I want to add a new pizza in the pizza-list.html form, it doesn't work. 我的问题是，当我想以pizza-list.html表单添加新的比萨时，它不起作用。

Before in click 'Add' new Pizza: 在点击“添加”新披萨之前： 尝试添加新的比萨之前

After in click 'Add' new Pizza: 在点击“添加”新比萨之后： 添加新的比萨之后

This error is translate to English like: 将此错误翻译为英语，例如：

Blocked request from various sources: the same origin policy prevents read http://162.250.78.47/api/pizzas remote resource. This can be fixed by moving the action to the same domain or activating CORS.

Answer 1

The error has already answered your question(which you never asked). 该错误已经回答了您的问题（您从未问过）。 You are trying to submit data to a different host, other than your angular application is running. 您正在尝试将数据提交到其他主机，而不是您的角度应用程序正在运行。

In layman terms: you are running your application at localhost, but supplying data to 162.150.78.47. 用外行术语来说：您正在本地主机上运行应用程序，但向162.150.78.47提供数据。 This is not allowed due to security restrictions. 由于安全限制，不允许这样做。

Possible solutions: 可能的解决方案：

1) Host everything on same domain(eg localhost) 1）将所有内容托管在同一域（例如localhost）

2) Enable CORS on API side. 2）在API端启用CORS。 I don't know what technology you use, but in C# you have to add [EnableCors] to your controller, which allows cross requesting. 我不知道您使用什么技术，但是在C＃中，您必须将[EnableCors]添加到您的控制器中，这允许交叉请求。

3) Look into JSONP. 3）查看JSONP。

我无法使用AngularJS中的$ http.post发送新数据

问题描述

1 个解决方案

解决方案1
1 已采纳 2014-08-03 13:01:17

我无法使用AngularJS中的$ http.post发送新数据

问题描述

1 个解决方案

解决方案1 1 已采纳 2014-08-03 13:01:17

解决方案1
1 已采纳 2014-08-03 13:01:17