AngularJs:发送到远程服务器的表单给出错误:访问受限URI被拒绝 - AngularJs: Form Post to a remote server gives error as Access to restricted URI denied

我是AngularJs新手，正在尝试学习它。所以我写了一个演示应用程序，试图将表单数据发布到本地主机上运行的网站。代码如下

index . html

<!DOCTYPE html>
<html ng-app="DemoApp">
  <head>
    <script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"></script>
    <script src="js/script.js"></script>
  </head>
  <body>
    <app-form></app-form>
  </body>
</html>

app-form.html

<h4>Form</h4>
<form ng-submit="appForm.submit();">
  <div ng-repeat="field in appForm.fields">
    <input type="{{field.type}" placeholder="{{field.placeholder}}" ng-model="appForm.data[field.name]">
  </div>
  <button>Submit</button>
</form>
<h4>Form data - live - JSON</h4>
<pre>{{appForm.data | json}}</pre>
<h4>Form data - live - URL encoded</h4>
<pre>{{appForm.data | urlEncode}}</pre>
<div ng-if="appForm.dataSubmitted">
<h4>Form data - submitted - URL encoded</h4>
<pre>{{appForm.dataSubmitted}}</pre>
</div>
<div class="err" ng-repeat="error in errors"> {{error}}</div>
<div class="info" ng-repeat="msg in msgs">{{msg}}</div>

js/script.js

angular.module('DemoApp', [])
 // Form directive
.directive('appForm', function() {
  return {
    restrict: 'E',
    scope: {},
    controller: 'AppFormCtrl',
    templateUrl: 'app-form.html'
  };
})
 // Form controller
.controller('AppFormCtrl', ['$scope', '$http', '$httpParamSerializer', function($scope, $http, $httpParamSerializer) {
  $scope.errors = [];
  $scope.msgs = [];
  $scope.appForm = {
    fields: [
      {name: 'name', type:'text', placeholder: 'Name (Bob York)'},
      {name: 'age', type:'text', placeholder: 'Age (21)'},
      {name: 'email', type:'email', placeholder: 'Email (example@example.com)'}
    ],
    data: {
      name: '',
      age: '',
      email: ''
    },
    dataSubmitted: '',
    submit: function() {
       // Here you would normally post the data to the server
       // Note how the data property is assigned explicitly a value url-encoded by the new service
       // Note the headers and the lack of transformRequest
       // $httpParamSerializerJQLike can also be used
      $http.post({
        url: 'http://localhost/<site>/api.php',
        method: 'POST',
        data: $httpParamSerializer($scope.appForm.data),
        headers: {
          'Content-Type': 'application/x-www-form-urlencoded'
        }
      }).success(function(data, status, headers, config) { 
            //TODO
            if(data.msg !='')
            {
                $scope.msg.push(data.msg);
            }
            else
            {
                $scope.msgs.push(data.msg);
            }
      }).error(function(data, status) { // called asynchronously if an error occurs
// or server returns response with an error status.
                        $scope.errors.push(status);
      });

       // Demo value to show url-encoding upon submission
      $scope.appForm.dataSubmitted = $httpParamSerializer($scope.appForm.data);
    }
  };
}])
 // Demo filter to show url-encoding live preview
.filter('urlEncode', ['$httpParamSerializer', function($httpParamSerializer) {
  var urlEncodeFilter = function(formData) {
    return $httpParamSerializer(formData);
  };
  urlEncodeFilter.$stateful = true;
  return urlEncodeFilter;
}]);

当我尝试提交数据时，我得到如下错误

"Error: Access to restricted URI denied
createHttpBackend/<@https://code.angularjs.org/1.4.1/angular.js:10506:6
sendReq@https://code.angularjs.org/1.4.1/angular.js:10325:0
$http/serverRequest@https://code.angularjs.org/1.4.1/angular.js:10037:15
processQueue@https://code.angularjs.org/1.4.1/angular.js:14551:27
scheduleProcessQueue/<@https://code.angularjs.org/1.4.1/angular.js:14567:26
$RootScopeProvider/this.$get</Scope.prototype.$eval@https://code.angularjs.org/1.4.1/angular.js:15830:15
$RootScopeProvider/this.$get</Scope.prototype.$digest@https://code.angularjs.org/1.4.1/angular.js:15641:14
$RootScopeProvider/this.$get</Scope.prototype.$apply@https://code.angularjs.org/1.4.1/angular.js:15935:12
ngEventHandler/<@https://code.angularjs.org/1.4.1/angular.js:23244:16
createEventHandler/eventHandler@https://code.angularjs.org/1.4.1/angular.js:3264:8
"

这个请求正在进行的站点正在运行PHP代码，可以理解url编码的数据(我正在做请求数据的序列化)。但不知道为什么会报告这个错误。我错过了一些东西，由于这个请求是失败的

好的，我找到了这个问题的解决方案。因为我面临这个问题，由于CORS。因此，为了解决这个问题，我在httpd.conf文件中添加了以下行，使其可以在网络

中访问

<IfModule mod_headers.c>
   Header set Access-Control-Allow-Origin "*"
 </IfModule>

也请确保mod_headers模块是启用的。更多信息请访问W3 Cors Wiki