文章/答案/技术大牛

发布

社区首页 >问答首页 >AngularJs: Form到远程服务器会导致错误，因为对受限URI的访问被拒绝

问AngularJs: Form到远程服务器会导致错误，因为对受限URI的访问被拒绝
EN

Stack Overflow用户

提问于 2015-07-09 19:06:57

回答 1查看 625关注 0票数 0

我对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编码的数据(为此我正在对请求数据进行序列化)。但无法了解为什么要报告这一错误。我是不是遗漏了什么东西，因为这个请求被失败了。

javascript

php

angularjs

回答 1

Stack Overflow用户

发布于 2015-07-22 05:25:08

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

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

另外，请确保启用了mod_headers模块。有关更多信息，请访问W3 Cors Wiki

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/31326173

复制

相似问题

问AngularJs: Form到远程服务器会导致错误，因为对受限URI的访问被拒绝
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs: Form到远程服务器会导致错误，因为对受限URI的访问被拒绝EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问AngularJs: Form到远程服务器会导致错误，因为对受限URI的访问被拒绝
EN