title: I get "No 'Access-Control-Allow-Origin' header error " even though I set it
body: <p>I am having this error even though I have headers assigned in angular's $http service:</p>
  
  <pre><code>function Hello($scope, $http) {
    $http({
      method: 'GET',
      url: 'http://localhost:8080/races',
      headers: {
        'Access-Control-Allow-Headers': 'accept',
        'Access-Control-Allow-Methods': 'GET',
        'Access-Control-Allow-Origin': '*'
      },
    }).then(function successCallback(response) {
      $scope.races = response;
    }, function errorCallback(response) {
      // called asynchronously if an error occurs
      // or server returns response with an error status.
  });
  </code></pre>
  
  <p>}</p>
  
  <p>This is full error message on console: </p>
  
  <pre><code>XMLHttpRequest cannot load http://localhost:8080/races. Response to preflight request doesn't pass access control check: No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://localhost:63343' is therefore not allowed access. The response had HTTP status code 403.
  </code></pre>
  
  <p>HTML: </p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app&gt;
  &lt;head&gt;
  &lt;title&gt;Hello AngularJS&lt;/title&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="hello.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
  &lt;div ng-controller="Hello"&gt;
  &lt;p&gt;The ID is {{races.raceId}}&lt;/p&gt;
  &lt;p&gt;The name is {{races.raceName}}&lt;/p&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>When I open the localhost:8080/races I can fully see the json:</p>
  
  <pre><code>[{"raceId":8446,"raceName":"test1"},{"raceId":8447,"raceName":"test2"}]
  </code></pre>