, also known as , is a technique to give more than one URL address to a page, a form, or a whole Web site/application. HTTP has a special kind of response, called a , for this operation. URL redirection URL forwarding HTTP redirect Redirects accomplish numerous goals: Temporary redirects during site maintenance or downtime Permanent redirects to preserve existing links/bookmarks after changing the site's URLs, progress pages when uploading a file, etc. Principle In HTTP, redirection is triggered by a server sending a special response to a request. Redirect responses have that start with 3, and a header holding the URL to redirect to. redirect status codes Location When browsers receive a redirect, they immediately load the new URL provided in the header. Besides the small performance hit of an additional round-trip, users rarely notice the redirection. Location There are several types of redirects, sorted into three categories: Permanent redirections Temporary redirections Special redirections Permanent redirections These redirections are meant to last forever. They imply that the original URL should no longer be used, and replaced with the new one.Search engine robots, RSS readers, and other crawlers will update the original URL for the resource. [1] The specification did not intend to allow method changes, but there are existing user agents that do change their method. was created to remove the ambiguity of the behavior when using non- methods. 308 GET Sometimes the requested resource can't be accessed from its canonical location, but it can be accessed from another place. In this case, a temporary redirect can be used. Temporary redirections Search engine robots and other crawlers don't memorize the new, temporary URL. Temporary redirections are also used when creating, updating, or deleting resources, to show temporary progress pages. [2] The specification did not intend to allow method changes, but there are existing user agents that do change their method. was created to remove the ambiguity of the behavior when using non-GET methods. 307 (Not Modified) redirects a page to the locally cached copy (that was stale), and (Multiple Choice) is a manual redirection: the body, presented by the browser as a Web page, lists the possible redirections and the user clicks on one to select it. Special redirections 304 300 Alternative way of specifying redirections HTTP redirects aren't the only way to define redirections. There are two others: HTML redirections with the element <meta> JavaScript redirections via the DOM HTTP redirects are the best way to create redirections, but sometimes you don't have control over the server. In that case, try a element with its attribute set to in the of the page. When displaying the page, the browser will go to the indicated URL. HTML redirections <meta> http-equiv Refresh <head> <head> < = = > meta http-equiv "Refresh" content "0; URL=https://example.com/" </ > head The attribute should start with a number indicating how many seconds the browser should wait before redirecting to the given URL. content Always set it to 0 for accessibility compliance. Obviously, this method only works with HTML, and cannot be used for images or other types of content. JavaScript redirections Redirections in JavaScript are performed by setting a URL string to the property, loading the new page: window.location .location = ; window "https://example.com/" Like HTML redirections, this can't work on all resources, and obviously, this will only work on clients that execute JavaScript. On the other hand, there are more possibilities: for example, you can trigger the redirect only if some conditions are met. Order of precedence With three ways to trigger redirections, several ways can be used at the same time. But which is applied first? HTTP redirects always execute first — they exist when there is not even a transmitted page. HTML redirects ( ) execute if there weren't any HTTP redirects. JavaScript redirects execute last, and only if JavaScript is enabled. <meta> When possible, use HTTP redirects and don't add element redirects. If someone changes the HTTP redirects but forgets to change the HTML redirects, the redirects will no longer be identical, which could cause an infinite loop or other nightmares. <meta> Use cases There are numerous use cases for redirects, but as performance is impacted with every redirect, their use should be kept to a minimum. Domain aliasing Ideally, there is one location, and therefore one URL, for each resource. But there are reasons for alternative names for a resource: Expanding the reach of your site A common case is when a site resides at , but accessing it from example.com should also work. Redirections for to are thus set up. You might also redirect from common synonyms or frequent typos of your domains. www.example.com example.com www.example.com Moving to a new domain For example, your company was renamed, but you want existing links or bookmarks to still find you under the new name. Forcing HTTPS Requests to the of your site will redirect to the version of your site. When you restructure Web sites, URLs change. Even if you update your site's links to match the new URLs, you have no control over the URLs used by external resources. http://version https:// Keeping links alive You don't want to break these links, as they bring valuable users and help your SEO, so you set up redirects from the old URLs to the new ones. This technique does work for internal links, but try to avoid having internal redirects. A redirect has a significant performance cost (as an extra HTTP request occurs). If you can avoid it by correcting internal links, you should fix those links instead. Temporary responses to unsafe requests requests modify the state of the server and the user shouldn't resend them unintentionally. U nsafe Typically, you don't want your users to resend , or requests. If you serve the response as the result of this request, a simple press of the reload button will resend the request (possibly after a confirmation message). PUT POST DELETE In this case, the server can send back a (See Other) response for a URL that will contain the right information. If the reload button is pressed, only that page is redisplayed, without replaying the unsafe requests. 303 Some requests may need more time on the server, like requests that are scheduled for later processing. In this case, the response is a (See Other) redirect that links to a page indicating that the action has been scheduled, and eventually informs about its progress, or allows to cancel it. Temporary responses to long requests DELETE 303 Configuring redirects in common servers Apache Redirects can be set either in the server config file or in the of each directory. .htaccess The module has and directives that set up redirects by default: mod_alias Redirect RedirectMatch 302 <VirtualHost *: >
	ServerName example.com
	Redirect / https: < 443 //www.example.com /VirtualHost> The URL will be redirected to , as will any files or directories under it ( will be redirected to ) https://example.com/ https://www.example.com/ https://example.com/some-page https://www.example.com/some-page does the same, but takes a to define a collection of affected URLs: RedirectMatch regular expression RedirectMatch ^ (.*)$ https: /images/ //images.example.com/$1 All documents in the directory will redirect to a different domain. images/ If you don't want a temporary redirect, an extra parameter (either the HTTP status code to use or the keyword) can be used to set up a different redirect: permanent Redirect permanent / https: # …acts the same : 
Redirect / https: //www.example.com as 301 //www.example.com The module can also create redirects. It is more flexible, but a bit more complex. mod_rewrite In Nginx, you create a specific server block for the content you want to redirect: Nginx server {
	listen ;
	server_name example.com; $scheme: } 80 return 301 //www.example.com$request_uri; To apply a redirect to a directory or only certain pages, use the directive: rewrite rewrite ^ (.*)$ https: rewrite ^ (.*)$ https: /images/ //images.example.com/$1 redirect; /images/ //images.example.com/$1 permanent; IIS In IIS, you use the element to configure redirections. <httpRedirect> Redirection loops Redirection loops happen when additional redirections follow the one that has already been followed. In other words, there is a loop that will never be finished and no page will ever be found. Most of the time this is a server problem, and if the server cannot detect it, it will send back a . If you encounter such an error soon after modifying a server configuration, this is likely a redirection loop. 500 Internal Server Error Sometimes, the server won't detect it: a redirection loop can spread over several servers which each don't have the full picture. In this case, browsers will detect it and display an error message. Firefox displays: Firefox has detected that the server is redirecting the request for this address in a way that will never complete .…while Chrome displays: This Webpage has a redirect loop In both cases, the user can't do much (unless a corruption is happening on their side, like a mismatch of cache or cookies). It is important to avoid redirection loops, as they completely break the user experience. Credits Source: https://developer.mozilla.org/en-US/docs/Web/HTTP/Redirections Published under licence Open CC Attribution ShareAlike 3.0

Apache

Mozilla

HTTP Redirections: Principles, Types and Use Cases

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

A Quick Introduction to the Resize Observer API

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

A Quick Introduction to the Resize Observer API

10 VSCode Extensions To Make Your Life Easier

10 Ways Stand Out as a Java Developer and Land that Dream Job

10 Tips For Junior Developers To Succeed in Code

10 Things Every Beginner Should Know When Learning Javascript And React

10 Reasons Why Front End Development Is a Great Career Choice

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps