CODEWITHSUNDEEP
google-chromeangularhttp-redirect
Michael Wurster
Michael Wurster

Reputation: 158

Blocked HTTP redirect due to missing preflight request in Chrome

We are currently building an Angular application backed with a RESTful API. The app tries to fetch a user's information with the following request URL: http://example.com:1337/api/users/1. This resource responses with a HTTP 301 (Moved Permanently) and sets the location header where the resource has been moved to, e.g. Location=http://another-hostname.com:8088/new/users/1. Angular's HTTP client or rather the browser is handling this response automatically and redirects to this new location.

Sadly, in Chrome we get the following error message:

XMLHttpRequest cannot load http://example.com:1337/api/users/1. Redirect from 'http://example.com:1337/api/users/1' to 'http://another-hostname.com:8088/new/users/1' has been blocked by CORS policy: Request requires preflight, which is disallowed to follow cross-origin redirect.

Chrome skips a preflight request (CORS) before calling the GET to the new resource. We tested this with Firefox and there it is working quite well. Firefox issues a new preflight request and the GET request afterwards will be handled successfully.

So, I'm wondering what's the correct behavior here. Has anyone made a similar experience with 30x responses?

Is there a possibility to disable the automatic browser (or Angular HTTP client) redirect handling? So that we can handle the new GET manually with a brand new this.http.get(...).

Thanks for any advice,

Michael

Upvotes: 4

Views: 7252

Answers (2)

FaKe_PK
FaKe_PK

Reputation: 91

Chrome skips a preflight request (CORS) before calling the GET to the new resource. We tested this with Firefox and there it is working quite well. Firefox issues a new preflight request and the GET request afterwards will be handled successfully.

You can find a discussion about that with additional workarounds and a link to the corresponding section of the W3C Recommendations for CORS here: https://stackoverflow.com/a/39728229/4282127.

Chrome should support preflight requests at redirects (3xx) since version 57. So updating to the latest Chrome version should solve at least the problem of missing preflight requests.

Upvotes: 5

Iv Ov
Iv Ov

Reputation: 380

Is there a possibility to disable the automatic browser (or Angular HTTP client) redirect handling?

No way for XMLHttpRequest (and Angular's $http therefore). Such option is provided in fetch(), which is not crossbrowser yet.

But there's a workaround:

  1. Determine the final request destination by a special preliminary request (by examining XHR.responseURL).
    This should be a simple request: only GET/POST/HEAD and only simple headers — so that it won't produce a preflight.

  2. Make your "real" request to that destination.

what's the correct behavior here

Cross-site redirects originally were forbidden, but now (since 4 Aug 2016) are allowed — but most browsers have not yet implemented the change.

This is very clearly explained in the MDN https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests_and_redirects

Upvotes: 2

Related Questions