title: Angular: Custom headers are ignored by $http and $resource. Why?
body: <p>I'm trying to access a REST service I don't control. First problem is that the service doesn't include a Access-Control-Allow-Origin header, which is a problem that, if I understand correctly, immediately limits me to JSONP.</p>
  
  <p>Also, by default, this service sends XML rather than JSON, though it's capable of sending JSON. I think it should respond to my Accept header, the people responsible for the service say it looks at my Content-Type. That would mean I'd need to do a POST rather than a GET (though get makes more sense when I'm just getting some static data, right?).</p>
  
  <p>Stubborn as I am, I'm trying my Accept header first. Since Angular only accepts JSON, I'd expect it to use the <code>Accept: application/json</code> header by default, but it doesn't, and it ignores my attempts to set it manually:</p>
  
  <pre><code>app.config(['$httpProvider', function($httpProvider){
      console.log($httpProvider.defaults.headers.common);
      delete $httpProvider.defaults.headers.common['X-Requested-With'];
      $httpProvider.defaults.headers.post['Accept'] = 'application/json, text/javascript';
      $httpProvider.defaults.headers.post['Content-Type'] = 'application/json; charset=utf-8';
      $httpProvider.defaults.headers.post['Access-Control-Max-Age'] = '1728000';
      $httpProvider.defaults.headers.common['Access-Control-Max-Age'] = '1728000';
      $httpProvider.defaults.headers.common['Accept'] = 'application/json, text/javascript';
      $httpProvider.defaults.headers.common['Content-Type'] = 'application/json; charset=utf-8';
      $httpProvider.defaults.useXDomain = true;
  }]);
  </code></pre>
  
  <p>I do this again in the actual resource:</p>
  
  <pre><code>return $resource('http://foo.com/getStuff', {}, {
      fetch: {
          method:'JSONP',
          params: params,
          headers: {
              'Accept':'application/json, text/javascript',
              'Content-Type':'application/json; charset=utf-8'
          },
          isArray:false,
          callback: 'JSON_CALLBACK'
      }
  });
  </code></pre>
  
  <p>But still, the request headers contain <code>Accept: */*</code>.</p>
  
  <p>My question is: WHY? Why does Angular ignore my headers? And how do I get it to use the proper headers anyway?</p>
  
  <p>And also: is there a way to use JSONP in a POST?</p>
  
  <p><strong>Edit:</strong> Originally I used Angular 1.0.7, but I just tried it with 1.2.3 and got the same results. Headers are ignored, yet everybody claims that this is the way to do it.</p>
  
  <p>I also tried doing it directly with $http, rather than with $resource, with the same results.</p>
  
  <p><strong>Edit 2:</strong> Here's a <a href="http://jsfiddle.net/fdZV7/1/" rel="noreferrer">JSFiddle</a>. It's anonymized and doesn't use my real server, but using Firebug/developer tools, you can verify that it sends <code>Accept: */*</code> on both calls, despite my many attempts to set <code>application/json</code> headers. And that is my real problem here. On my real server, I'm getting an XML result because of that, despite my real server's ability to send JSON.</p>
  
  <p>(Whether the real server supports jsonp is less relevant at the moment. This dummy server clearly doesn't, but that's okay. I just care about the headers.)</p>
  
  <p><strong>Edit 3:</strong> I've tried both solutions suggested below:</p>
  
  <pre><code>$http.defaults.headers.common['Accept'] = 'application/json, text/javascript';
  
  $http.defaults.transformRequest.push(function (data, headersGetter) {
      headersGetter().Accept = "application/json, text/javascript";
      return data;
  });
  </code></pre>
  
  <p>I've tried both statements separately. In the controller, and then in the service just before the http call itself. Still doesn't work.</p>
  
  <p>Can someone give me a JsFiddle where this is shown to work?</p>
  
  <p><strong>Edit 4:</strong> I notice that when I use GET rather than JSONP, the Accept header is correct. But then the response is rejected because it doesn't have the correct header.</p>
  
  <p>What kind of headers should a JSONP call have? Because there's a lot more headers in the JSONP call, but nothing that identifies it as JSONP. Does the server have to have explicit JSONP support for this to work? I suddenly realize I don't know nearly enough about jsonp.</p>