Question

我是AngularJs的新手，并试图学习它。所以我正在编写一个演示应用程序，试图将表单数据发布到localhost上运行的站点。下面给出了相同的代码

的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>

应用-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编码数据（我正在对请求数据进行序列化）。但无法理解为什么会报告此错误。我是否遗漏了此请求失败的原因。

Answer 1

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

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

另外请确保已启用mod_headers模块。有关详细信息，请查看W3 Cors Wiki

AngularJs：表单发布到远程服务器会出现错误，因为访问受限制的URI被拒绝

1 个答案: