⚠️ This lesson is retired and might contain outdated information.

Understand HTTP 3xx Redirection Response Codes

Pete Johanson
InstructorPete Johanson
Share this video with your friends

Social Share Links

Send Tweet
Published 8 years ago
Updated 2 years ago

The 3xx family of status codes are used in HTTP responses to inform the client/browser should look somewhere else for the requested resource. Most often, this is used to indicate a resource is temporarily or permanently found at a new URL, but it may also be used to inform the client that the client’s own cache is the other location where the requested resource can be found. We will explore the available redirection status codes, and what additional information they convey.

[00:03] The 300 to 399 HTTP status codes are used to indicate that the resource we are attempted to use is located elsewhere. Let's take a look at one such response.

[00:14] I've created a repository on GitHub, and then renamed it. Let's try and load the issues list for that repository. Here we can see that the API has returned a 301 Moved Permanently response. In order to tell us where this URL has moved to, there's a location header in the response that gives us a new URL we should use to load the requested resource.

[00:39] Because browsers automatically will follow redirects, we can let HTPI do the same thing for us, by passing in -f. Now we will be automatically redirected, and we can see it has loaded the issues list from my sample repository. Because 301 Moved Permanently does not work with post requests, if we want to, for instance, create an issue, a different status code will be used.

[01:07] We'll be using a post to attempt to create a new issue on our repository with the title of "Test me." Here we can see, instead of a 301, we've gotten a 307 Temporary Redirect. Again, the location header is used to indicate what URL we should actually be using for this request.

[01:28] Unlike 301, a 307 will properly redirect a post request and result in a post to the new URL, as expected. Like before, let's try it again and pass in the -f command. Here we can see our new issue has been successfully created. We're now getting back a 201 Created response.

[01:54] Much like 301 and 307, which indicate a new URL can be used for a response, there is a status code that can be used to indicate that the browser should use its own cache to respond to the request. That's the new location. Unlike a new URL, the actual cache can be the new location.

[02:15] Let's first do an HTTP get on my GitHub user. In the response, the server sent us an Etag to indicate the specific version of our user's pjohansen resource, and most browsers will include this response in the cache. Now, if I could do an HTTP get on that same resource, and I use an If-None-Match with that Etag, instead of just returning our resource, we now get a 304 Not Modified response.

[02:58] The server is telling us that the resource we're looking for is in our cache, and we can just use that. Much like a 301 or a 307 Redirect that says the resource we're looking for is at a different URL, this is a way of letting the browser know the resource we're looking for is actually already in the browser cache and can be used from there.

[03:19] To review, the 300 through 399 HTTP status codes are used to indicate that the resource and the URL given is actually somewhere else, and that might be a new URL or in the browser's own cache.

egghead
egghead
~ an hour ago

Member comments are a way for members to communicate, interact, and ask questions about a lesson.

The instructor or someone from the community might respond to your question Here are a few basic guidelines to commenting on egghead.io

Be on-Topic

Comments are for discussing a lesson. If you're having a general issue with the website functionality, please contact us at support@egghead.io.

Avoid meta-discussion

  • This was great!
  • This was horrible!
  • I didn't like this because it didn't match my skill level.
  • +1 It will likely be deleted as spam.

Code Problems?

Should be accompanied by code! Codesandbox or Stackblitz provide a way to share code and discuss it in context

Details and Context

Vague question? Vague answer. Any details and context you can provide will lure more interesting answers!

Markdown supported.
Become a member to join the discussionEnroll Today