Removing 'X-Requested-With' from default headers. #1454

Closed
wants to merge 1 commit into
from

Conversation

Projects
None yet
@rkirov
Contributor

rkirov commented Oct 12, 2012

fixes #1004

@petebacondarwin

This comment has been minimized.

Show comment Hide comment
@petebacondarwin

petebacondarwin Oct 25, 2012

Member

Interestingly jQuery adds this to requests if it is not already set and the request is not cross domain:

From jQuery.js - send function

// X-Requested-With header
// For cross-domain requests, seeing as conditions for a preflight are
// akin to a jigsaw puzzle, we simply never set it to be sure.
// (it can always be set on a per-request basis or even using ajaxSetup)
// For same-domain requests, won't change header if already provided.
if ( !s.crossDomain && !headers["X-Requested-With"] ) {
  headers[ "X-Requested-With" ] = "XMLHttpRequest";
}

Perhaps $http should do the same?

Member

petebacondarwin commented Oct 25, 2012

Interestingly jQuery adds this to requests if it is not already set and the request is not cross domain:

From jQuery.js - send function

// X-Requested-With header
// For cross-domain requests, seeing as conditions for a preflight are
// akin to a jigsaw puzzle, we simply never set it to be sure.
// (it can always be set on a per-request basis or even using ajaxSetup)
// For same-domain requests, won't change header if already provided.
if ( !s.crossDomain && !headers["X-Requested-With"] ) {
  headers[ "X-Requested-With" ] = "XMLHttpRequest";
}

Perhaps $http should do the same?

@taralx

This comment has been minimized.

Show comment Hide comment
@taralx

taralx Nov 13, 2012

+1 to this. I get:

XMLHttpRequest cannot load http://[censored]. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

taralx commented Nov 13, 2012

+1 to this. I get:

XMLHttpRequest cannot load http://[censored]. Request header field X-Requested-With is not allowed by Access-Control-Allow-Headers.

@geddski

This comment has been minimized.

Show comment Hide comment
@geddski

geddski Nov 15, 2012

Contributor

This is easy enough to work around with:

delete $httpProvider.defaults.headers.common['X-Requested-With'];

but I agree it's annoying.

+1

Contributor

geddski commented Nov 15, 2012

This is easy enough to work around with:

delete $httpProvider.defaults.headers.common['X-Requested-With'];

but I agree it's annoying.

+1

@imjoshholloway

This comment has been minimized.

Show comment Hide comment
@imjoshholloway

imjoshholloway Nov 15, 2012

You can actually use @GEDDesign's work around using the .config() method:

App.config(['$httpProvider', function($httpProvider) {
    delete $httpProvider.defaults.headers.common["X-Requested-With"]
}]);

You can actually use @GEDDesign's work around using the .config() method:

App.config(['$httpProvider', function($httpProvider) {
    delete $httpProvider.defaults.headers.common["X-Requested-With"]
}]);
@chadhietala

This comment has been minimized.

Show comment Hide comment
@chadhietala

chadhietala Nov 19, 2012

I'm using the work around as @imjoshholloway suggests but for some reason the responses are getting canceled. My server is sending a 200 response with the correct length. Not really sure what's going on. Has anyone else experienced this and if so have you found a work around?

I'm using the work around as @imjoshholloway suggests but for some reason the responses are getting canceled. My server is sending a 200 response with the correct length. Not really sure what's going on. Has anyone else experienced this and if so have you found a work around?

@IgorMinar

This comment has been minimized.

Show comment Hide comment
@IgorMinar

IgorMinar Nov 26, 2012

Owner

I fixed the commit message, added explanation and a breaking change note and landed this as 3a75b11

thanks!

Owner

IgorMinar commented Nov 26, 2012

I fixed the commit message, added explanation and a breaking change note and landed this as 3a75b11

thanks!

@IgorMinar IgorMinar closed this Nov 26, 2012

@davedx

This comment has been minimized.

Show comment Hide comment
@davedx

davedx Feb 17, 2013

Contributor

Just for the record, I had to use this workaround in the latest version of Angular when trying to get it to talk to Rails. Not very getting-started friendly.

Contributor

davedx commented Feb 17, 2013

Just for the record, I had to use this workaround in the latest version of Angular when trying to get it to talk to Rails. Not very getting-started friendly.

@IgorMinar

This comment has been minimized.

Show comment Hide comment
@IgorMinar

IgorMinar Feb 19, 2013

Owner

Which workaround? To delete the x-requested-with header or to add it back in?

Owner

IgorMinar commented Feb 19, 2013

Which workaround? To delete the x-requested-with header or to add it back in?

@davedx

This comment has been minimized.

Show comment Hide comment
@davedx

davedx Feb 19, 2013

Contributor

Deleting it lets $http work with another domain.

Using resources I get the issue again, but deleting the x-requested-with header doesn't fix that, so I guess resource doesn't use $http under the hood, or something else.

I gave up at that point. If I come back to this I'll try to run my API on the same domain, but that's not always possible.

Contributor

davedx commented Feb 19, 2013

Deleting it lets $http work with another domain.

Using resources I get the issue again, but deleting the x-requested-with header doesn't fix that, so I guess resource doesn't use $http under the hood, or something else.

I gave up at that point. If I come back to this I'll try to run my API on the same domain, but that's not always possible.

@Sate Sate referenced this pull request in angular/angular-seed Feb 27, 2013

Closed

Removed 'X-Requested-With' from header defaults in angular-seed #53

@Sate

This comment has been minimized.

Show comment Hide comment
@Sate

Sate Feb 27, 2013

I too just had to manually delete the "X-Requested-With", but it was because I was using angular seed. Angular seed still has this default header. I just made a pull request to take it out. angular/angular-seed#53

Sate commented Feb 27, 2013

I too just had to manually delete the "X-Requested-With", but it was because I was using angular seed. Angular seed still has this default header. I just made a pull request to take it out. angular/angular-seed#53

@GulinSS

This comment has been minimized.

Show comment Hide comment
@GulinSS

GulinSS Feb 27, 2013

Why this header was removed from defaults? Can anybody explain me the reason?

GulinSS commented Feb 27, 2013

Why this header was removed from defaults? Can anybody explain me the reason?

@pkozlowski-opensource

This comment has been minimized.

Show comment Hide comment
@pkozlowski-opensource

pkozlowski-opensource Feb 27, 2013

Member

@GulinSS I believe that it was removed since it was creating a lot of confusion since it is triggering pre-flight (OPTIONS) requests for the CORS request. It was generating massive number of support questions and confusion among users.

@GulinSS I believe that it was removed since it was creating a lot of confusion since it is triggering pre-flight (OPTIONS) requests for the CORS request. It was generating massive number of support questions and confusion among users.

@sirkitree

This comment has been minimized.

Show comment Hide comment
@sirkitree

sirkitree Mar 24, 2013

Any idea when this will land in a release?

Any idea when this will land in a release?

@mnot mnot referenced this pull request in mnot/hinclude Mar 29, 2013

Closed

Add X-Requested-With header #16

@patcito

This comment has been minimized.

Show comment Hide comment
@patcito

patcito Apr 17, 2013

I'm still getting the error here with 1.1.4.

This works:

$.post('http://localhost:3000/items', {name: 'foo');

But not that:

$http.post('http://localhost:3000/items', {name: 'foo'})

I get a:

XMLHttpRequest cannot load http://localhost/items. Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin. localhost/:1

patcito commented Apr 17, 2013

I'm still getting the error here with 1.1.4.

This works:

$.post('http://localhost:3000/items', {name: 'foo');

But not that:

$http.post('http://localhost:3000/items', {name: 'foo'})

I get a:

XMLHttpRequest cannot load http://localhost/items. Origin http://localhost:9000 is not allowed by Access-Control-Allow-Origin. localhost/:1

@sharq1

This comment has been minimized.

Show comment Hide comment
@sharq1

sharq1 Apr 24, 2013

I'm having the same situation as @patcito - $.post works fine and $http.post sends OPTIONS, which I cannot afford (speed, performance).
The problem is I cannot attach custom headers without $http, so it would be nice to control $http behavior for cross domain requests.

sharq1 commented Apr 24, 2013

I'm having the same situation as @patcito - $.post works fine and $http.post sends OPTIONS, which I cannot afford (speed, performance).
The problem is I cannot attach custom headers without $http, so it would be nice to control $http behavior for cross domain requests.

@paulwalker

This comment has been minimized.

Show comment Hide comment
@paulwalker

paulwalker Apr 29, 2013

Apparently, the X-Requested-With header is no longer sent with version 1.1.4. Many web frameworks depend upon this header to determine if the request was made via ajax, so it would be nice to instead change the behavior based upon whether the request is Cross Origin or not. Also, the documentation still states it is sent: http://docs.angularjs.org/api/ng.$http

EDIT: Correction: my apologies, I was not aware there was specific documentation version for 1.1.4: http://code.angularjs.org/1.1.4/docs/api/ng.$http

Apparently, the X-Requested-With header is no longer sent with version 1.1.4. Many web frameworks depend upon this header to determine if the request was made via ajax, so it would be nice to instead change the behavior based upon whether the request is Cross Origin or not. Also, the documentation still states it is sent: http://docs.angularjs.org/api/ng.$http

EDIT: Correction: my apologies, I was not aware there was specific documentation version for 1.1.4: http://code.angularjs.org/1.1.4/docs/api/ng.$http

@dturkenk

This comment has been minimized.

Show comment Hide comment
@dturkenk

dturkenk May 31, 2013

This change definitely breaks making JSON requests to Rails (at least on localhost). Rails is only returning HTML without that header.

It's an easy workaround to force it in, but at a minimum it might be useful to up-level the commit comment to the documentation. Probably better would be what Paul Walker suggested to determine whether the request is cross-domain or not.

This change definitely breaks making JSON requests to Rails (at least on localhost). Rails is only returning HTML without that header.

It's an easy workaround to force it in, but at a minimum it might be useful to up-level the commit comment to the documentation. Probably better would be what Paul Walker suggested to determine whether the request is cross-domain or not.

@taralx

This comment has been minimized.

Show comment Hide comment
@taralx

taralx Jun 1, 2013

If rails is depending on a non-standard header to determine the correct output format, I would argue that it is rails that needs changing.

+1 on documenting that this header is not added by default, though.

taralx commented Jun 1, 2013

If rails is depending on a non-standard header to determine the correct output format, I would argue that it is rails that needs changing.

+1 on documenting that this header is not added by default, though.

@dturkenk

This comment has been minimized.

Show comment Hide comment
@dturkenk

dturkenk Jun 1, 2013

I'm relatively new to Rails, so I could be wrong on this, but it looks like if you want to support rendering both HTML and JSON from the same route, the two ways to get it to return JSON are to make an Ajax request (with the X-Requested-With header) or to include "format=json" as a parameter.

Looks like jquery includes this header by default, so that's why Rails decided to make it a shortcut.

That said, adding the documentation is probably sufficient, and some of the Rails/Angular integration gems can add it if they want to make it easier.

dturkenk commented Jun 1, 2013

I'm relatively new to Rails, so I could be wrong on this, but it looks like if you want to support rendering both HTML and JSON from the same route, the two ways to get it to return JSON are to make an Ajax request (with the X-Requested-With header) or to include "format=json" as a parameter.

Looks like jquery includes this header by default, so that's why Rails decided to make it a shortcut.

That said, adding the documentation is probably sufficient, and some of the Rails/Angular integration gems can add it if they want to make it easier.

@mazhekin

This comment has been minimized.

Show comment Hide comment
@mazhekin

mazhekin Aug 18, 2013

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

 $http.defaults.useXDomain = true;

 $http.get('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=asp+site:codehint.ru').
        success(
            function (data, status, headers, config) {
                alert('answer');
            }
        );

Is not working! Because: Origin http://localhost:4157 is not allowed by Access-Control-Allow-Origin.

I have just started using angularjs an forced to use $.getJSON because it is working fine in situation above.Can anybody show me the right solution of code above to make ajax call to outer services like google.

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

 $http.defaults.useXDomain = true;

 $http.get('http://ajax.googleapis.com/ajax/services/search/web?v=1.0&q=asp+site:codehint.ru').
        success(
            function (data, status, headers, config) {
                alert('answer');
            }
        );

Is not working! Because: Origin http://localhost:4157 is not allowed by Access-Control-Allow-Origin.

I have just started using angularjs an forced to use $.getJSON because it is working fine in situation above.Can anybody show me the right solution of code above to make ajax call to outer services like google.

@stodd

This comment has been minimized.

Show comment Hide comment
@stodd

stodd Sep 5, 2013

This change breaks some authentication logic on the server side of our app. We were relying on X-Requested-With to determine if a request is an ajax request or a regular request. We are now relying on application/json in the Accept header unless there is a better way for requests from Angular.

stodd commented Sep 5, 2013

This change breaks some authentication logic on the server side of our app. We were relying on X-Requested-With to determine if a request is an ajax request or a regular request. We are now relying on application/json in the Accept header unless there is a better way for requests from Angular.

@piuccio piuccio referenced this pull request in ariatemplates/cdn.ariatemplates.com Dec 11, 2013

Closed

Deal with antiCORS proxies. #1

@Inoryy Inoryy referenced this pull request in symfony/symfony Jun 20, 2014

Closed

Introduce a new isAjaxRequest() method #11145

@sallespro

This comment has been minimized.

Show comment Hide comment
@sallespro

sallespro Jul 20, 2014

hi,

i have tried deleting the X-Requested-With header but it still does not work with Koa backend.

    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];

what's wrong ?

hi,

i have tried deleting the X-Requested-With header but it still does not work with Koa backend.

    $httpProvider.defaults.useXDomain = true;
    delete $httpProvider.defaults.headers.common['X-Requested-With'];

what's wrong ?

@craigruks craigruks referenced this pull request in evansd/whitenoise Nov 14, 2014

Closed

OPTIONS HTTP request support #22

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment