title: AngularJs: Form Post to a remote server gives error as Access to restricted URI denied
body: <p>I am new to AngularJs and trying to learn it. So I was writing a demo application which tries to post the form data to site running on localhost. The code for the same is given below</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="DemoApp"&gt;
  
    &lt;head&gt;
      &lt;script data-require="angular.js@1.4.1" data-semver="1.4.1" src="https://code.angularjs.org/1.4.1/angular.js"&gt;&lt;/script&gt;
      &lt;script src="js/script.js"&gt;&lt;/script&gt;
    &lt;/head&gt;
  
    &lt;body&gt;
      &lt;app-form&gt;&lt;/app-form&gt;
    &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app-form.html</strong></p>
  
  <pre><code>&lt;h4&gt;Form&lt;/h4&gt;
  &lt;form ng-submit="appForm.submit();"&gt;
    &lt;div ng-repeat="field in appForm.fields"&gt;
      &lt;input type="{{field.type}" placeholder="{{field.placeholder}}" ng-model="appForm.data[field.name]"&gt;
    &lt;/div&gt;
    &lt;button&gt;Submit&lt;/button&gt;
  &lt;/form&gt;
  
  &lt;h4&gt;Form data - live - JSON&lt;/h4&gt;
  &lt;pre&gt;{{appForm.data | json}}&lt;/pre&gt;
  
  &lt;h4&gt;Form data - live - URL encoded&lt;/h4&gt;
  &lt;pre&gt;{{appForm.data | urlEncode}}&lt;/pre&gt;
  
  &lt;div ng-if="appForm.dataSubmitted"&gt;
  &lt;h4&gt;Form data - submitted - URL encoded&lt;/h4&gt;
  &lt;pre&gt;{{appForm.dataSubmitted}}&lt;/pre&gt;
  &lt;/div&gt;
  
  &lt;div class="err" ng-repeat="error in errors"&gt; {{error}}&lt;/div&gt;
  &lt;div class="info" ng-repeat="msg in msgs"&gt;{{msg}}&lt;/div&gt;
  </code></pre>
  
  <p><strong>js/script.js</strong></p>
  
  <pre><code>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/&lt;site&gt;/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;
  }]);
  </code></pre>
  
  <p>So when I tries to submit the data I get error as below</p>
  
  <pre><code>"Error: Access to restricted URI denied
  createHttpBackend/&lt;@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/&lt;@https://code.angularjs.org/1.4.1/angular.js:14567:26
  $RootScopeProvider/this.$get&lt;/Scope.prototype.$eval@https://code.angularjs.org/1.4.1/angular.js:15830:15
  $RootScopeProvider/this.$get&lt;/Scope.prototype.$digest@https://code.angularjs.org/1.4.1/angular.js:15641:14
  $RootScopeProvider/this.$get&lt;/Scope.prototype.$apply@https://code.angularjs.org/1.4.1/angular.js:15935:12
  ngEventHandler/&lt;@https://code.angularjs.org/1.4.1/angular.js:23244:16
  createEventHandler/eventHandler@https://code.angularjs.org/1.4.1/angular.js:3264:8
  "
  </code></pre>
  
  <p>The site to which this request is being made is running a PHP code and can understand url encoded data (for which I am doing serialization of the request data). But not able to get why this error is getting reported. Do I am missing something due to which this request is getting failed.</p>