AngularJS $resource not sending X-Requested-With

Question

I'm using angular 1.1.5 and I'm using a $resource to make a XHR to a REST service but it seems like the the $resource isn't appending the header as X-Requested-With as XMLHttpRequest, is that a normal behavior? and Do I need to append the header manually?

function loginCtrl($scope,$resource) {
    $scope.submit = function () {
         var resource = $resource('/Api/User/login', {},
              {
                  authenticate: {
                      method: 'POST',
                      isArray: false,
                      headers: {
                          '__RequestVerificationToken':  $scope.loginRequest.Token

                      }
                  }
              });
         resource.authenticate($scope.loginRequest);
    };
}

$resource doesn't support headers. you may need to switch to use $http — zs2020, Aug 11 '13 at 05:25
I think you still have to set it in $http, something like $http.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest' — zs2020, Aug 11 '13 at 05:51
actually I can to add the header manually like headers: {'X-Requested-With': 'XMLHttpRequest'} and it works but why it doesn't sending it by default. — pedrommuller, Aug 11 '13 at 06:16
Was wondering the same thing: http://stackoverflow.com/a/19001632/33453 — Breandán, Sep 25 '13 at 13:15

score 109 · Accepted Answer · edited Feb 25 '16 at 14:27

109

Just add this to your app

myAppModule.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
}]);

edited Feb 25 '16 at 14:27

Daniel Darabos

26,991
10
102
114

answered May 27 '14 at 21:10

Johnny

1,116
1
8
3

2

Laravel 5.1 expect this header to determine a request as an “ajax request”. – Rubens Mariuzzo Dec 18 '15 at 09:03
great, now, how do we do that in Angular2? – Ayyash Mar 01 '16 at 16:19
I've been looking for almost a week, and right when I commented, I found the answer :/ https://angular.io/docs/ts/latest/api/http/BaseRequestOptions-class.html – Ayyash Mar 01 '16 at 16:39
You need this, in order for Asp.Net MVC to recognize correctly `Request.IsAjaxRequest()` – FirstVertex Mar 03 '16 at 20:18
@Ayyash new link? – Jeff Nov 03 '16 at 14:51
@Jeff https://angular.io/docs/ts/latest/api/http/index/BaseRequestOptions-class.html – Ayyash Nov 05 '16 at 08:16

score 26 · Answer 2 · edited May 23 '17 at 12:31

26

It used to but was changed. (see here)

"X-Requested-With header is rarely used in practice and by using it all the time we are triggering preflight checks for crossdomain requests."

From Thomas Pons' answer here.

edited May 23 '17 at 12:31

Community

1
1

answered Sep 25 '13 at 13:19

Breandán

1,855
22
34

3

it's good to know, I'm using it because I'm validating the request with an antiForgeryToken attribute in servicestack, the thing is that I validate to be an ajax request to know that at least that request was made from a form, now the question is: "how can I know in the server side if that request is ajax?", thanks for the answer! – pedrommuller Sep 25 '13 at 13:28
I'd give you a +1 for the additional reference to the actual commit. – kumarharsh Feb 16 '15 at 11:42

score 2 · Answer 3 · answered Mar 10 '16 at 15:11

I had the same issue and I solved it using:

myApp.config(['$httpProvider', function($httpProvider) {
    $httpProvider.defaults.headers.common['X-Requested-With'] = 'XMLHttpRequest';
}]);

Also you can set the header to accept application/json:

$http({
  method: 'GET',
  url: '/someUrl',
  headers: { Accept: 'application/json' }
})

AngularJS $resource not sending X-Requested-With

3 Answers3

Linked