Post form data to rest resource in angularJS

Question

I am trying to post form data as a request body to a rest service using angularJS but I cannot get it to hit the resource. Please help if you can..

I have a service like this ...

angular.
  module('core.search').
  factory('Search', ['$resource',
    function($resource) {
      return $resource('http://localhost:8888/PROJECT/rest/search, {}, {
          query: {
              method: 'POST',
              isArray: true
          }
      });
    }
  ]);

A component like this...

angular.
  module('vehicleSearch').
  component('vehicleSearch', {
    templateUrl: 'vehicle-search/vehicle-search.template.html',
    controller: ['Search',
      function VehicleSearchController(Search) {
        this.vehicles = [];
        this.searchVehicles = function(vehicleSearchForm) {
            this.vehicles = Search.query([], JSON.stringify(vehicleSearchForm));
        };
      }
    ]
  });

and a template like this ...

<div>
<h4>Vehicle Search</h4>
<form ng-submit="$ctrl.searchVehicles(vehicleSearchForm)">
    <table>
        <tr>
            <td><label for="vrm" >VRM: </label></td>
            <td><input type="text" id="vrm" name="vrm" ng-model="vehicleSearchForm.vrm" /></td>
            <td><input type="text" id="type" name="type" ng-model="vehicleSearchForm.type" /></td>
        </tr>
        <tr>
            <td><input type="submit" value="search"/></td>
        </tr>
    </table>
    <br>
    <table>
        <tr>
            <td>VRM</td>
            <td>Make</td>
            <td>Model</td>
            <td>Colour</td>
            <td>Date Registered</td>
        </tr>
        <tr ng-repeat="vehicle in $ctrl.vehicles">
            <td>{{vehicle.vrm}}</td>
            <td>{{vehicle.make}}</td>
            <td>{{vehicle.model}}</td>
            <td>{{vehicle.colour}}</td>
            <td>{{vehicle.dateFirstReg}}</td>
        </tr>
    </table>
</form>

I know the resource is returning data as I can call it through my testing tool with a request body with media type application/json like .. {"type" : "vehicleSearchRequest", "searchReason" : "01", "vrm" : "ABC123"}

I thought maybe I needed to specify what media type the body would be but the default appears to be the same so am at a loss. When I try this in angular I can see the request is hitting the server as is authenticated but then does nothing so believe it is something to do with the request body. Please help.

score 0 · Answer 1 · answered Feb 16 '18 at 10:41

I discovered that the problem was in fact due to my rest resources being on a different domain. The browser doesn't allow this for security reasons. The error: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:8000' is therefore not allowed access. For anybody who makes same mistake see: XMLHttpRequest cannot load https://www.[website].com/

Post form data to rest resource in angularJS

1 Answers1