Angular.js: $http service doesn't add (X-Requested-With' :'XMLHttpRequest') header to the request

[m-amr]

I am trying to call an api

$http.post(url, data).success(function(response){
});

On the server side i was checking if the request is XmlHttpRequest by checking
X-Requested-With' header and i found that it return false

after i added this header to the $http as configuration it works

$http({
'ur'l:url,
'method':method,
'data':data,
'headers': { 'X-Requested-With' :'XMLHttpRequest'}
});

i debugged angular.js source code and found that angular is creating xhr by this function

function createXhr() {
    return new window.XMLHttpRequest();
}

should $http service send 'headers': { 'X-Requested-With' :'XMLHttpRequest'} with the request by default ?

[Narretz]

Hi, 'X-Requested-With' :'XMLHttpRequest' is a non-standard header, and personally I don't think angular needs to send it by default. Configuring this is pretty simple, too. But let's wait what others think.

[pkozlowski-opensource]

@m-amr the actual setting of of headers happens here: https://github.com/angular/angular.js/blob/c1199fb6b085733a2e078bac4e728e587b2c27ae/src/ng/httpBackend.js#L52-L56

I'm not sure what / how did you debug but I don't see AngularJS doing anything special with the X-Requested-With header. So if a browser is fine with it AngularJS should be fine as well.

Could you please share a plunker that demonstrates the issue? What is the HTTP method you are using?

[m-amr]

@pkozlowski-opensource
I am using $http.post()
but the request doesn't contain 'headers': { 'X-Requested-With' :'XMLHttpRequest'}
by default.
but it works when i added it as a configuration
$http({
'ur'l:url,
'method':method,
'data':data,
'headers': { 'X-Requested-With' :'XMLHttpRequest'}
});

i was asking should $http service send 'headers': { 'X-Requested-With' :'XMLHttpRequest'} with the request by default ?

[pkozlowski-opensource]

No, it doesn't send X-Requested-Withheaders by default - it used to, but it was causing many problems with CORS requests. But you can configure the $http service to send this header, if you like, by adding it to default headers, see "Setting HTTP Headers" in https://docs.angularjs.org/api/ng/service/$http

[mkonecny]

I know it's a non-standard header, but a ton of frameworks use this header. Look at how rack (which almost every ruby web-server uses) detects whether a request is XHR or not:

https://github.com/rack/rack/blob/master/lib/rack/request.rb#L221

[gkalpak]

@mkonecny, I know a ton of frameworks use this header, but https://github.com/angular/angular.js/issues/11008#issuecomment-73522348 :smiley:

[maorcc]

Here is the discussion that resulted in the removal of this header: https://github.com/angular/angular.js/issues/1004

[k-vladyslav]

@mkonecny hello from Symfony2 :)
Method \Symfony\Component\HttpFoundation\Request::isXmlHttpRequest
https://github.com/symfony/http-foundation/blob/v2.3.42/Request.php#L1564

[ArpanTanna]

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

Using this $http service send 'headers': { 'X-Requested-With' :'XMLHttpRequest'} with the request by default

[michaelperrin]

@k-vladyslav I had the same problem with Symfony and $http in AngularJS. The isXmlHttpRequest returns false.

Adding manually the necessary headers solves the problem.

[bkdotcom]

In Angular 2, simply adding the X-Requested-With header makes the request "not simple" and triggers the preflight OPTIONS request.... which likely opens up a whole new ball of worms on the backend. sigh My framework is looking for the X-Requested-With header... so I try to provide it... which sends a OPTIONS request.. which my framework doesn't seem to understand

[Harlem99]

呃呃

[Narretz]

Hello everyone,

if you have problems with OPTIONS requests then please check relevant docs about Cross Origin Resource Sharing (CORS), for example in MDN: https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS. CORS or OPTIONS requests are NOT Angular(JS) features, they are a part of HTTP and must be handled by setting the correct headers on client and server.

Many server frameworks support or expect a {'X-Requested-With' : 'XMLHttpRequest'} request header that marks the incoming request as AJAX / XHR. In AngularJS, you can set it by default for all requests like this:

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

For Angular docs, please see https://angular.io.