Protocol redirect incorrectly routing React JS app to default page in IE9
Question
I've been working on a React JS application with rackt/react-router and testing has recently uncovered an odd behavior specific to IE9.
Context:
We have our F5 set up to perform a protocol redirect (302) so that if someone attempts to navigate to http://react.site.root/#/virtual.page it will redirect them to https://react.site.root/#/virtual.page . Since this is a single page app the redirect is really occurring on http://react.site.root/ . This redirect happens as a result of a Keep-Alive request.
Problem:
In IE9 when this protocol redirect occurs the user ends up at https://react.site.root/#/default.route regardless of the virtual page they were attempting to hit. This issue is not seen in later versions of IE, Chrome (desktop or Android), iPhone 5s or 6 (didn't have actual devices to test others). Interestingly enough it also occurs when using any iPhone version in BrowserStack.
My Research:
I have also searched using stackoverflow and Google and the only semi-related issue I found is that IE9 caches redirects, but from what I understand that only applies to 301 redirects and since the protocol redirect path does not include the virtual page or any routing data in the cookies that doesn't seem to fit. Nevertheless I found a test for this that required deleting browser history and running a tab under InPrivate Browsing which indicated this was not the issue. I have also recorded the request and redirect response in Fiddler for both working browsers and IE9 and see nothing suspect.
It seems as though IE9 is treating the redirected page as a new page in the sense that maybe the original javascript context is being destroyed on the redirect, which would explain why react is using the default route. Unfortunately I don't know how to test that theory or move forward with this issue in general. Any help is greatly appreciated.
2 answers
solution1
0 ACCPTED 2015-10-19 21:09:35
I found the answer. In short, IE9 and some older browsers forget about the fragment portion of the originally requested URL and will only use fragments present in the redirect response. Since the browser strips the fragment out before making the original request to the server it can't be present in the redirect location.
See the following for more info:
URL Fragment and 302 redirects
http://blogs.msdn.com/b/ieinternals/archive/2011/05/17/url-fragments-and-redirects-anchor-hash-missing.aspx
solution2
0 2017-01-25 15:48:45
put this at the top of your <head> :
<script>
window.location.hash = window.location.hash
</script>
Problem solved
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.