title: AngularJS CORS request custom header
body: <p>I'm having trouble getting CORS enabled on my server in combination with AngularJS. I'm using Angular 1.2.16 and this is my server config:</p>
  
  <pre><code>Header set Access-Control-Allow-Origin "*"
  Header set Access-Control-Allow-Headers "Content-Type, X-CSRF-Token, X-Requested-With, Accept, Accept-Version, Content-Length, Content-MD5, Date, X-Api-Version, X-File-Name, Authorization"
  Header set Access-Control-Allow-Methods "POST, GET, PUT, DELETE, OPTIONS"
  Header set Access-Control-Allow-Credentials "true"
  </code></pre>
  
  <p>I can use the following request:</p>
  
  <pre><code>$http.post(configuration.authUrl, {username: 'username', password: 'password'})
      .success(function (data) {
           $cookieStore.put(configuration.sessionName, {
               token: data.authenticationToken,
                user: data.user
           });
      })
      .error(function () {}));
  </code></pre>
  
  <p>since this request doesn't use a custom header.</p>
  
  <p>When I afterwards try to request the following:
  <code>Balance.get()</code> with Balance being:</p>
  
  <pre><code>angular.module('portalApp')
      .factory('Balance', ['$resource', 'Auth', 'configuration', function ($resource, Auth, configuration) {
          return $resource(configuration.balanceUrl, {}, {
              get: {
                  method: 'GET',
                  isArray: false,
                  headers: {
                      Authorization: Auth.getAuthToken()
                  }
              }
          });
      }]);
  </code></pre>
  
  <p>I get a <code>401 Unauthorized</code> on the balanceUrl.</p>
  
  <p>In the config I have put:</p>
  
  <pre><code>$httpProvider.defaults.useXDomain = true;
  delete $httpProvider.defaults.headers.common['X-Requested-With'];
  </code></pre>
  
  <p>I even tried putting <code>$http.defaults.headers.common.Authorization = Auth.getAuthToken();</code> before the <code>$resource</code> in the <code>Balance</code> resource factory but that didn't help.</p>
  
  <p>The headers being sent to the preflight <code>OPTIONS</code> request don't have the <code>Authorization</code> header, no matter what method I use. These are the request headers of the preflight <code>OPTIONS</code> request.</p>
  
  <pre><code>OPTIONS /api/v1.0/user/orders HTTP/1.1
  Host: host
  Connection: keep-alive
  Cache-Control: no-cache
  Access-Control-Request-Method: GET
  Pragma: no-cache
  Origin: origin
  User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_3) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/35.0.1916.153 Safari/537.36
  Access-Control-Request-Headers: accept, authorization
  Accept: */*
  Referer: referer
  Accept-Encoding: gzip,deflate,sdch
  Accept-Language: en-US,en;q=0.8
  </code></pre>
  
  <p>Any suggestions?</p>