Blocked HTTP redirect due to missing pre-flight request in Chrome
We are currently building an Angular app powered by a RESTful API. The application tries to get the user information from the following URL-address request: http://example.com:1337/api/users/1
. This resource responds with HTTP 301 (moves permanently) and sets a header to the location where the resource was moved, for example. Location=http://another-hostname.com:8088/new/users/1
... The Angular HTTP client, or rather the browser, automatically processes this response and redirects it to this new location.
Unfortunately, the following error message appears in Chrome:
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 the pre-check request (CORS) before making a GET call to a new resource. We tested this with Firefox and it works pretty well there. Firefox will issue a new request before flying and after that the GET request will be successfully processed.
So I am wondering what is the correct behavior here. Has anyone done a similar experience with 30 answers?
Is there a way to disable automatic browser (or Angular HTTP client) redirects? So that we can handle the new GET manually with the new one this.http.get(...)
.
Thanks for any advice,
Michael
source to share
Chrome skips the pre-check request (CORS) before making a GET call to a new resource. We tested this with Firefox and it works pretty well there. Firefox will issue a new request before flying and after that the GET request will be successfully processed.
This can talk with additional workarounds and a reference to the relevant section of the W3C recommendation for CORS: fooobar.com/questions/165360 / ... .
Chrome must support pre-flight requests for forwarding (3xx) from version 57. Therefore, updating to the latest version of Chrome should at least resolve the issue of no pre-flight requests.
source to share
Is there a way to disable automatic browser (or Angular HTTP client) redirects?
No way for XMLHttpRequest (and Angular $ http therefore). This option is provided in fetch()
a non-cross-browser yet.
But there is a workaround:
-
Determine the final destination using a custom pre-request (by examining XHR.responseURL).
It should be a simple request : only GET / POST / HEAD and only simple headers - so it won't create a preflight period. -
Make your "real" request to this destination.
What's the correct behavior here
Initial redirects were forbidden, but now ( as of Aug 4, 2016 ), but most browsers haven't implemented the change yet.
This is explained very clearly on MDN https://developer.mozilla.org/en-US/docs/Web/HTTP/Access_control_CORS#Preflighted_requests_and_redirects
source to share