Fast way to enable CORS in Flask servers

#flask #python #cors #react

Originally published at https://matheustguimaraes.com/blog/flask-cors

Fast way to enable CORS in Flask servers

Cross-Origin Resource Sharing (CORS) is a mechanism that uses additional HTTP headers to tell browsers to give a web application running at one origin, access to selected resources from a different origin. A web application executes a cross-origin HTTP request when it requests a resource that has a different origin (domain, protocol, or port) from its own. [1]

Lets create a simple Flask server called app.py:

from flask import Flask, jsonify


@app.route("/", methods=["GET"])
def get_example():
    """GET in server"""
    response = jsonify(message="Simple server is running")
    return response

@app.route("/", methods=["POST"])
def post_example():
    """POST in server"""
    return jsonify(message="POST request returned")

if __name__ == "__main__":
    app.run(host="0.0.0.0", port="5000", debug=True)

If you are building an React app and using axios library, GET requests to server will look something like this:

import axios from "axios"

const apiURL = "http://localhost:5000"

axios
    .get(apiURL)
        .then((response) => {
            setState(response.message);
        })
    .catch((error) => {
        console.log(error);
    });

But without CORS enabled, the browser will block the server's response for security reasons. To receive data using a React application, CORS must be enabled.

To enable CORS in GET responses on the server, you can simply add a header in response:

@app.route("/", methods=["GET"])
def get_example():
    """GET in server"""
    response = jsonify(message="Simple server is running")

    # Enable Access-Control-Allow-Origin
    response.headers.add("Access-Control-Allow-Origin", "*")
    return response

After

response.headers.add("Access-Control-Allow-Origin", "*")

, all GET requests will be accepted.

To enable requests like POST, PUT, DELETE, etc., the easiest way is to install Flask-CORS (https://flask-cors.readthedocs.io/en/latest). To install Flask-CORS using pip:

pip install flask-cors

In an example of a POST request, simply add the decorator @cross_origin in the function beginning:

@app.route("/", methods=["POST"])
@cross_origin()
def post_example():
    """POST in server"""
    return jsonify(message="POST request returned")

There you go. Now your React app can communicate, receive and send information to the server using all HTTP methods, including POST, PUT, DELETE and more.

Have a nice day!

Follow me on https://twitter.com/matheusguimr to talk more about web development :)

Top comments (9)

Maximilian Burszley • Aug 27 '20

If your intent is only for your frontend to communicate with your backend, you should be more strict about your CORS ACL, but then this whole article can be boiled down to reading the flask-cors documentation.