Clear the 301/302 redirection cache (Chrome)

I think many web developers and server administrators had been facing the 301 redirection cache. I had facing it very often until I learn the lesson...
I hope it helps you and you learn something from me, not from your mistakes 💥

👉 For example, when you configure the SSL certificate and make the 301 redirection from HTTP to HTTPS, but something goes wrong, you don't have the ability to enter the HTTP version again. Browser caches the 301 redirection and redirects you to HTTPS.

👉 The second example is when you changing the website domain. If you redirect from the old domain to the new domain with the 301 redirection, browser caches it too, and prevent's you to enter the old domain.

👌 How to avoid that? Use the 302 redirection as long as everything works as it should. Then, and ONLY then, change the 302 redirection 301. Why? ❓

📚 The definition of 301 and 302 redirections:

301 - means that the resource (page) is moved permanently to a new location. The client/browser should not attempt to request the original location but use the new location from now on.

302 - means that the resource is temporarily located somewhere else, and the client/browser should continue requesting the original URL.

The 301 is a permanent redirection. Even if you remove the redirection from the server, your browser continuously redirects the resources to the new domain or HTTPS, because of the hard cache.

So the 302 is not hard cached by the browser and you have the ability to access the old version if you remove the redirection from your server (website).

💀 How really dangerous is the 301 in production? It is very simple. If something goes wrong and you release the 301 redirection to the production, your client's browsers permanently cache this redirection and you will have to tell all the clients to clear the browser cache. This is a 💩

🤔 Okay, what I can do if my browser caches the 301 redirection? Every website developer know the Chrome Developer tools (F12) and a Right-Click on the Refresh button

😟 But I can tell you that is not enough. Suppose you badly redirected the old domain to the new domain with the 301 redirection and you want to clear the domain cache. You must do it on the old domain because the old domain is redirecting. But you can't access it... The only thing to do is to clear the whole browser cache and even cookies, but no one wants to do it.

😎 There is a trick on how you can access the old domain (or any redirecting URL).

1. Before going to the website open the Chrome Developer tools (F12).
2. Go to Network tab
3. Check the Preserve log checkbox
4. Clear the log

🚀 Now enter your old domain URL and navigate to it. Of course, it will be redirected to the new domain. But in your Network log, you will have the old domain redirection request and you will have the ability to clear the domain cache by clicking the request with Right-Click and select the Clear browser cache. After that, your 301 redirection will be removed. But please remember that you must remove the redirection from your server before.

In the screenshot above I redirecting the non-www to the www domain.

❤️ Thanks for reading this. I hope it was helpful to you. Feedback and questions are appreciated.

🙏 Follow on Twitter, GitHub, and let’s connect on LinkedIn