title: Multiple $http requests in Angular controller cross origin to REST API
body: <p>I am trying to do multiple GET-requests to my own REST API written in Java using Spring. 3/10 times both request will be handled fine. 7/10 one of the http-requests will fail with a 'No Access-Control-Allow-Origin header is present on the requested resource' error. I have a REST Controller like this:</p>
  
  <pre><code>@RestController
  @CrossOrigin
  @RequestMapping("/person")
  public class PersonRestController {
  
  @Autowired
  ActivityTracker tracker;
  
  @RequestMapping(method = RequestMethod.POST, consumes = MediaType.APPLICATION_JSON_VALUE)
  public void addPerson(@RequestBody Person person){
      tracker.addPerson(person);
  }
  
  @RequestMapping(method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
  public Collection&lt;Person&gt; getPersons(){    
      return tracker.getPersons();
  }  
  
  @RequestMapping(value = "/{id}", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
  public Person getPerson(@PathVariable long id){
      return tracker.getPerson(id);
  }
  
  @RequestMapping(value="/{id}/activities", method = RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
  public Collection&lt;RunActivity&gt; getActivitiesByPerson(@PathVariable("id") long id){
      return tracker.getActivities(tracker.getPerson(id));
  
  }
  
  @RequestMapping(value = "/{id}", method = RequestMethod.PUT, consumes = MediaType.APPLICATION_JSON_VALUE)
  public void updatePerson(@RequestBody Person person){
      tracker.updatePerson(person);
  }
  
  @RequestMapping(value = "/{id}", method = RequestMethod.DELETE)
  public void deletePerson(@PathVariable("id") Long id){
      tracker.deletePerson(tracker.getPerson(id));
  }
  
  @RequestMapping(value = "/fastest", method=RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
  public Person getFastestRunner(){
      return tracker.getFastestRunner();
  }
  
  @RequestMapping(value = "/longest", method=RequestMethod.GET, produces = MediaType.APPLICATION_JSON_VALUE)
  public Person getLongestRunner(){
      return tracker.getLongestRunner();
  }
  
  
  }
  </code></pre>
  
  <p>My Angular application looks like this:</p>
  
  <pre><code>angular.module('trackerApp', ['ngCookies', 'ui.router', 'pascalprecht.translate'])
  .config(function($stateProvider, $urlRouterProvider, $translateProvider){
      $urlRouterProvider.otherwise('/');
  
      $translateProvider.translations('en', {
          TITLE: 'Welcome!',
          INTROMESSAGE: 'Use this Activity Tracker application for free!',
          en: 'English',
          nl: 'Nederlands'
      })
      .translations('nl', {
          TITLE: 'Welkom!',
          INTROMESSAGE: 'Gebruik deze volledig gratis activiteitstracker!',
          en: 'English',
          nl: 'Nederlands'
      });
  
      $translateProvider.preferredLanguage('en');
  
      $stateProvider
          .state('persondetails', {
              url: '/runners/:userId',
              templateUrl: 'views/activitiesByPerson.html',
              controller: 'personDetailController as personDetails'
          });
  })
  
  .controller('personDetailController', function($http, $stateParams){
      var personDetails = this;
      var userId = $stateParams.userId;
  
      var reqUrlTwo = 'http://193.191.187.14:10578/RestTracker-1.0-SNAPSHOT/person/' + userId;
  
      $http({
          url:  reqUrlTwo,
          method: 'GET'
      }).success(function(response){
          personDetails.person = response;
      });
  
      var reqUrl = 'http://193.191.187.14:10578/RestTracker-1.0-SNAPSHOT/person/' + userId + '/activities';
  
      $http({
          url: reqUrl,
          method: 'GET'
  
  
      }).success(function(response){
          personDetails.activities = response;
      });
  
  
  });
  </code></pre>
  
  <p>So 3/10 times both GET-request will be handled fine and results will be shown. But 7/10 times one of the 2 will fail and show me</p>
  
  <blockquote>
    <p>XMLHttpRequest cannot load <a href="http://193.191.187.14:10578/RestTracker-1.0-SNAPSHOT/person/2" rel="nofollow">http://193.191.187.14:10578/RestTracker-1.0-SNAPSHOT/person/2</a>. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin '<a href="http://localhost:8000" rel="nofollow">http://localhost:8000</a>' is therefore not allowed access. The response had HTTP status code 500.</p>
  </blockquote>
  
  <p>How is it that sometimes both will succeed and sometimes just one won't?</p>
  
  <p>I have also tried using @ResponseBody and setting the headers and XML setup </p>