HTTP redirect explained using FLASK

HTTP Redirect

In HTTP, redirection is triggered by a server sending a special redirect response to a request. Redirect responses have status codes that start with 3, and a Location header holding the URL to redirect to.

When browsers receive a redirect, they immediately load the new URL provided in the Location header. Besides the small performance hit of an additional round-trip, users rarely notice the redirection.

Simple Flask sample app

We will create a simple Flask application to demonstrate this. Here are the files we are going to need:

app.py

from flask import Flask, redirect, render_template, request, url_for

app = Flask(__name__)

@app.route("/")
def hello_world():
    return "<p>Hello, World!</p>"

@app.route("/form", methods=["POST", "GET"])
def name_form():
    if request.method == "POST":
        return redirect(url_for("hello", name=request.form.get("name", None)))
    return render_template("form.html")

@app.route("/hello/<name>")
def hello_name(name=None):
    return render_template("hello.html", name=name)

Note that we have used the redirect() method in name_form() view. When the user enters a name, they are redirected to another page showing a greeting with the name they entered.

We also need two simple templates we use which you need to place in the templates/ folder. We will not be trying to beautify the pages since that is not the focus of this article.

templates/form.html:

<!DOCTYPE html>
<form method="POST">
    <label>Enter your name:</label>
    <input type="text" name="name">
    <button type="submit">Submit</button> 
</form>

templates/hello.html:

<!DOCTYPE html>
<p>
{% if name %}
    <h1>Hello {{name}}</h1>
{% else %}
    <h1>Hello user<</h1>
{% endif %}
</p>

This is what our folder structure looks like:

Demo

Let's run the app using flask run --debug and navigate to /form. Remember to press F12 to open developer tools.

Enter any name and click on submit. I entered 'Rohan', and now this is what you will see in the browser:

Now go to the network tab in developer tools:

Notice, that the response to the form submission didn't directly send you the new page. Instead, the server sent a 302 code along with a Location header.

HTTP/1.1 302 Found
Location: /hello/Rohan

The browser then requested the new URI specified by the Location header.

Summary

We have explored what is HTTP redirection and how it works in a browser. Then, for demonstration, we wrote a simple application using Python Flask.

Thanks for reading and I hope you found this article useful.

Rohan's blog